The <form>
tag defines an area with input elements.
All input values inside the form are submitted to the server as a group.
By default, forms are invisible.
A <form>
with two input fields and a button.
The <form>
itself is not visible.
<form action="/tutorial/action.html">
<input type="text" name="firstname" placeholder="First name"><br /><br />
<input type="text" name="lastname" placeholder="Last name"><br /><br />
<button type="submit">Submit</button>
</form>
The <form> tag creates an interactive form that accepts user input.
A form contains input elements that are submitted as a group to the server.
Forms may contain any number of the following elements:
Forms are invisible. They can be made visible with styling attributes, but this is not adviced.
A <form>
with labels, input fields, and a submit button.
The <fieldset> and <legend> logically group the fields.
<form action="/tutorial/action.html">
<fieldset>
<legend>Customer Information</legend>
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname"> <br /> <br />
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname"> <br /> <br />
<input type="submit" value="Submit">
</fieldset>
</form>
A list with <form> tag attributes.
Attribute | Value | Description |
---|---|---|
action | URL | URL or path the submitted form data will be sent to |
method |
get post |
HTTP method to use when sending form data |
id | identifier | Defines a unique identifier for the form. |
data-* | value | Defines additional data that can be used by JavaScript. |
enctype |
application/x-www-form-urlencoded, multipart/form-data, text/plain |
Only for method="post", indicates how the submitted form data should be encoded to the server |
target |
_blank _self _parent _top framename |
Defines where or how to open the submission results page |
autocomplete | on off |
Presents the user with previously selected values |
novalidate | novalidate | Indicates that the form will not be validated upon submission |
accept-charset | character_set | Character encoding to be used for form submission |
rel |
nofollow noopener noreferrer external author help license next bookmark search |
Defines the relationship between the current page and the action URL (the form handler). |
For addional global attributes see our global attributes list.
Tip: Forms are designed to group and submit data values. By default, forms are invisible, but they can be made visible with class and style attributes. The problem is that this adds additional responsibility to the form which is not recommended. If styling is required, wrapping the form in a <div> element solves this easily.
Do not use the attribute listed below. It is no longer valid on the form tag in HTML5.
Attribute | Description | Alternative |
---|---|---|
accept |
List of file extensions that are accepted in file picker. | accept attribute on <input type="file"> |
The <form> tag is part of a group of tags
that are used to create data entry forms.
This group is referred to as the Form tag group.
Together, they allow you to create comprehensive data input solutions.
Here is a list of form tags
Element | Description |
---|---|
<form> | Defines a data entry area that contains input elements |
<input> | Creates an input field in which data can be entered |
<label> | Creates a label or brief description before input elements |
<textarea> | Creates a multi-line text input control |
<select> | Creates a dropdown control |
<button> | Creates a clickable button that can contain text or an image |
<datalist> | Specifies a list of options for a textfield (<input>) element |
<fieldset> | Groups related form elements and displays a box with a legend around these |
<legend> | Defines a caption for a fieldset |
Here is when <form> support started for each browser:
Chrome
|
1.0 | Sep 2008 |
Firefox
|
1.0 | Sep 2002 |
IE/Edge
|
1.0 | Aug 1995 |
Opera
|
1.0 | Jan 2006 |
Safari
|
1.0 | Jan 2003 |