HTML - <form> Tag

Quiz

Introduction to <form> Tag

The HTML <form> tag is used to collect user input on a website through a form. A form can include fields for the user's name, address, phone number, and more. HTML forms can be utilized to gather data about the user or to request their opinions on a particular product.

Syntax

Following is the syntax of <form> tag −

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

Attributes

The HTML <form> tag supports Global and Event attributes of HTML. It also accepts specific attributes, which are listed bellow.

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

Example: Creating a Form

In the following program, we use the HTML <form> tag to create user input form. This user login form will have three input fields with type 'text', 'password', and button. The examples below will illustrate the usage of the <form> tag, including where, when, and how to use it to create form. Each form is designed for a specific purpose, such as a login form, sign-up form, or registration form.

<!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>

Example: Styling a Form

Let's look at the following example, where we use the <form> tag and apply CSS to the input fields. This example demonstrates an HTML form for user registration, including fields for first name, last name, email, password, confirm password, and address.

<!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

Print Page