The <form>
represents a document section that contains interactive controls to submit information to a web server.
It is possible to use the :valid
and :invalid
CSS pseudo-classes to style a <form>
element.
Content categories | Flow content, palpable content |
---|---|
Permitted content |
Flow content, but not containing <form> elements |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parents | Any element that accepts flow content |
Permitted ARIA roles |
group , presentation
|
DOM interface | HTMLFormElement |
This element includes the global attributes.
accept
HTML 4
accept-charset
"UNKNOWN"
, indicates the same encoding as that of the document containing the form element.action
formaction
attribute on a <button>
or <input>
element.autocapitalize
autocapitalize
attribute is specified on an individual form control descendant, it trumps the form-wide autocapitalize
setting. The non-deprecated values are available in iOS 5 and later. The default value is sentences
. Possible values are: none
: Completely disables automatic capitalizationsentences
: Automatically capitalize the first letter of sentences.words
: Automatically capitalize the first letter of words.characters
: Automatically capitalize all characters.on
: Deprecated since iOS 5.off
: Deprecated since iOS 5.autocomplete
HTML5
autocomplete
attribute on an element belonging to the form. Possible values are: off
: The user must explicitly enter a value into each field for every use, or the document provides its own auto-completion method; the browser does not automatically complete entries.on
: The browser can automatically complete values based on values that the user has previously entered in the form.Note: If you set autocomplete
to off
in a form because the document provides its own auto-completion, then you should also set autocomplete
to off
for each of the form's input
elements that the document can auto-complete. For details, see the note regarding Google Chrome in the Browser Compatibility chart.
enctype
method
attribute is post
, enctype is the MIME type of content that is used to submit the form to the server. Possible values are: application/x-www-form-urlencoded
: The default value if the attribute is not specified.multipart/form-data
: The value used for an <input>
element with the type
attribute set to "file".text/plain (HTML5)
This value can be overridden by a formenctype
attribute on a <button>
or <input>
element.
method
post
: Corresponds to the HTTP POST method ; form data are included in the body of the form and sent to the server.get
: Corresponds to the HTTP GET method; form data are appended to the action
attribute URI with a '?' as separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.This value can be overridden by a formmethod
attribute on a <button>
or <input>
element.
name
id
should be used instead). It must be unique among the forms in a document and not just an empty string in HTML 5.novalidate
HTML5
formnovalidate
attribute on a <button>
or <input>
element belonging to the form.target
_self
: Load the response into the same HTML 4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified._blank
: Load the response into a new unnamed HTML 4 window or HTML5 browsing context._parent
: Load the response into the HTML 4 frameset parent of the current frame, or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self
._top
: HTML 4: Load the response into the full original window, and cancel all other frames. HTML5: Load the response into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self
.<iframe>
.HTML5: This value can be overridden by a formtarget
attribute on a <button>
or <input>
element.
<!-- Simple form which will send a GET request --> <form action="" method="get"> <label for="GET-name">Name:</label> <input id="GET-name" type="text" name="name"> <input type="submit" value="Save"> </form> <!-- Simple form which will send a POST request --> <form action="" method="post"> <label for="POST-name">Name:</label> <input id="POST-name" type="text" name="name"> <input type="submit" value="Save"> </form> <!-- Form with fieldset, legend, and label --> <form action="" method="post"> <fieldset> <legend>Title</legend> <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label> </fieldset> </form>
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of '<form>' in that specification. | Living Standard | |
HTML5 The definition of '<form>' in that specification. | Recommendation | |
HTML 4.01 Specification The definition of '<form>' in that specification. | Recommendation | Initial definition |
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | Yes | Yes | Yes | Yes | Yes | Yes |
accept |
Yes | Yes | Yes | Yes | Yes | Yes |
accept-charset |
Yes | Yes | Yes | Yes | Yes | Yes |
action |
Yes | Yes | Yes | Yes | Yes | Yes |
autocapitalize |
No | No | No | No | No | No |
autocomplete |
Yes1 | Yes | Yes | Yes | Yes | Yes |
enctype |
Yes | Yes | Yes | Yes | Yes | Yes |
method |
Yes | Yes | Yes | Yes | Yes | Yes |
name |
Yes | Yes | Yes | Yes | Yes | Yes |
novalidate |
1 | Yes | 4 | 10 | ? | ? |
target |
Yes | Yes | Yes | Yes | Yes | Yes |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
accept |
Yes | Yes | Yes | Yes | Yes | Yes | Yes |
accept-charset |
Yes | Yes | Yes | Yes | Yes | Yes | Yes |
action |
Yes | Yes | Yes | Yes | Yes | Yes | Yes |
autocapitalize |
No | No | No | No | No | No | Yes |
autocomplete |
Yes | Yes | Yes | Yes | Yes | Yes | Yes |
enctype |
Yes | Yes | Yes | Yes | Yes | Yes | Yes |
method |
Yes | Yes | Yes | Yes | Yes | Yes | Yes |
name |
Yes | Yes | Yes | Yes | Yes | Yes | Yes |
novalidate |
? | ? | Yes | 4 | Yes | ? | ? |
target |
Yes | Yes | Yes | Yes | Yes | Yes | Yes |
1. The Google Chrome UI for auto-complete request varies, depending on whether autocomplete
is set to off
on <input>
elements as well as their form. Specifically, when a form has autocomplete
set to off
and its <input>
element's autocomplete
fttribute is not set, then if the user asks for autofill suggestions for the <input>
element, Chrome might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have autocomplete
set to off
, the browser will not display that message. For this reason, you should set autocomplete
to off
for each <input>
that has custom auto-completion.
<button>
, <datalist>
, <fieldset>
, <input>
,<keygen>
, <label>
, <legend>
, <meter>
, <optgroup>
, <option>
, <output>
, <progress>
, <select>
, <textarea>
.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form