Signup/Sign In

HTML form Tag

A form consists of multiple different types of elements which are used to take user input for example text input, checkboxes, text area(for long text), etc. If we want to create a form in a webpage, we have to use the HTML <form> tag.

  • In a form, plain text and HTML elements are used to structure the form.

  • Various different HTML elements are used inside the form, like input text, check box, radio button to make the form interactive by allowing any user to enter information.

  • The starting and ending <form> tags instruct the browser regarding the starting and ending point of a form.

  • Also, this is a Block-Level Element.

HTML <form> Tag - Syntax and Usage

The <form> tag requires the start(opening) tag and end(closing) tag.

Below we have a basic syntax for the same:

<form>
    ...content
</form>

HTML <form> Tag Attributes

The <form> tag supports both Global attributes and Event attributes. and some of the common attributes are given below:

attributes Description
autocomplete this attribute is used to enable the autocomplete feature in the form.
novalidate This attribute specifies that the form should not validate while submitting.
name This attribute is used to refer to the name of the FORM
action It refers to the URL(Uniform Resource Locator) of the program in the server used to process the form.
enctype It is used to specify how the information should be encoded in the form before sending it to the server.
method this attribute is used to specify how information is sent from browser to server.
target This attribute is used to specify the destination where the result will be displayed after the submission of the form.

HTML <form> Tag Basic Example

Below we have a basic example for the <form> tag:

<!doctype html>
<html>
    <head>
        <title>
            Example of Form tag
        </title>
    </head>
    <body>
        <p>Starting of Form</p>
        <form>
            This is our First Form
        </form>
        <p>Ending of Form</p>
    </body>
</html>


Starting of Form
This is our First Form
Ending of Form

In the code above, we have simply used the opening and closing <form> tag and in that we have added plain text. This is just to show that HTML <form> tag can be used with simple plain text too. But that is not the purpose of it. So let's add a few form elements to our form to make it ready for user input.

Using action and method attributes:

In HTML <form> tag, action and method are the two most important and most used attributes.

<form action="somefile.php" method="GET">
    <label for="name">Name:</label>
    <input id="name" type="text" name="name"/>
    <input type="submit" value="Submit">
</form>

In the above code example, you see that we have added the action attribute with a file name as its value. This file will receive the Form values in GET or POST request, based on what you choose. Based on what backend programming language you use to process your form values, you can receive the GET and POST values and then perform any action on those values, maybe save them in the database or update some existing values in the database.

If you leave the action attribute blank, then form values will be submitted to the current page(on which form is present), hence the blank value of action attribute is interpreted as SELF URL.

HTML <form> Example:

Let's make another form with a few fields in the form to take user input.

HTML Form with Fieldset, Legend, and Label:

In this example we will add a few more elements to a form. You can study more about using these tags: HTML fieldset Tag, HTML Legend Tag and HTML Label tag.

<form action="" method="POST">
    <fieldset>
        <legend>Gender</legend>
        <input type="radio" name="gender" value="male"> Male
        <input type="radio" name="gender" value="male"> Female
        <input type="radio" name="gender" value="male"> Others
    </fieldset>
</form>

Browser Support for HTML <form> tag

Following browsers support this attribute:

  • Firefox 1+

  • Google Chrome 1+

  • Internet Explorer 2+

  • Apple Safari 1+

  • Opera 4+


About the author:
Aspiring Software developer working as a content writer. I like computer related subjects like Computer Networks, Operating system, CAO, Database, and I am also learning Python.