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+
