HTML - <form> Tag

HTML <form> tag is used to collect user input on a website throuugh a form. A form can contain user's name, address, and phone number, etc. HTML form that can be used to collect data about the user or to ask their opinions on a certain product.

Syntax

<form>.....</form>

Attribute

HTML form tag supports Global and Event attributes of HTML. Accept some specific attributes as well which are listed bellow.

Attribute	Value	Description
accept-charset	character_set	Specifies a list of character encodings that the server accepts. The default value is "unknown".
action	URL	Specifies a URI/URL of the back-end script that will process the form.
autocomplete	on off	Specifies whether form should have autocomplete on or off
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	The mime type used to encode the content of the form.
name	text	Defines a unique name for the form.
novalidate	novalidate	Specifies that the form should not be validated when submitted.
method	get post	Specifies the HTTP method to use when the form is submitted. Possible values
target	_blank _self _parent _top	Where to display the response after submitting the form.
rel	external help license next nofollow noopener noreferrer opener prev search	Specify the relationship between a linked resource and the current document

Examples of HTML form Tag

Bellow examples will illustrate the usage of form tag, where, when and how to use it to create form, each form is desing for some specific purpose like login form, SignUp form, registration form, etc.

Creating form

In the following program, we are using HTML <form> tag to create a form for user input. This form (user login form) will have three input fields with type 'text', 'password', and ‘button’.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML form tag</title>
</head>
<body>
   <!--create a html form-->
   <h3>User login form</h3>
   <form> Username : <input type="text">
      <br>
      <br> Password : <input type="password">
      <br>
      <input type="button" value='Login'>
   </form>
</body>
</html>

Styling Form

Let's look at the following example, where we are going to use form tag and appling CSS to the input fields.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Form</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background-color: #f0f0f0;
            }

            form {
                width: 600px;
                background-color: #fff;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }

            fieldset {
                border: 1px solid black;
                padding: 10px;
                margin: 0;
            }

            legend {
                font-weight: bold;
                margin-bottom: 10px;
            }

            label {
                display: block;
                margin-bottom: 5px;
            }

            input[type="text"],
            input[type="email"],
            input[type="password"],
            textarea {
                width: calc(100% - 20px);
                padding: 8px;
                margin-bottom: 10px;
                box-sizing: border-box;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            input[type="submit"] {
                padding: 10px 20px;
                margin-left: 475px;
                border-radius: 5px;
                cursor: pointer;
                background-color: #04af2f;
            }
        </style>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>
                    Registration Form
                </legend>
                <label>First Name</label>
                <input type="text" name="FirstName" />
                <label>Last Name</label>
                <input type="text" name="LastName" />
                <label>Email id</label>
                <input type="email" name="email"/>
                <label>Enter your password</label>
                <input type="password" name="password"/>
                <label>Confirm your password</label>
                <input type="password"name="confirmPass"/>
                <label>Address</label>
                <textarea name="address"></textarea>
                <input type="submit" value="Submit"/>
            </fieldset>
        </form>
    </body>
</html>

Supported Browsers

Tag
form	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm