The HTML <form>
element represents a document section that
contains interactive controls for submitting information to a web
server.
It is possible to use the
:valid
and :invalid
CSS pseudo-classes to style a <form>
element based on whether or not
the individual elements
within the form are valid.
Attributes
This element supports the global attributes as well as the following element-specific attributes:
accept-charset
: StringA space- or comma-delimited list of character encodings that the server accepts. The browser uses them in the order in which they are listed. The default value, the reserved string
"UNKNOWN"
, indicates the same encoding as that of the document containing the form element.In previous versions of HTML, the different character encodings could be delimited by spaces or commas. In HTML5, only spaces are allowed as delimiters.
action
: URLautocapitalize
: StringThis is a nonstandard attribute used by iOS Safari Mobile which controls whether and how the text value for textual form control descendants should be automatically capitalized as it is entered/edited by the user. If the
autocapitalize
attribute is specified on an individual form control descendant, it trumps the form-wideautocapitalize
setting. The non-deprecated values are available in iOS 5 and later. The default value issentences
.none
Completely disables automatic capitalization.
sentences
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
: StringIndicates whether input elements can by default have their values automatically completed by the browser. This setting can be overridden by an
autocomplete
attribute on an element belonging to the form.For most modern browsers (including Firefox 38+, Google Chrome 34+, IE 11+) setting the
autocomplete
attribute will not prevent a browser's password manager from asking the user if they want to store login fields (username and password), if the user permits the storage the browser will autofill the login the next time the user visits the page. See Theautocomplete
attribute and login fields.Note: If you set
autocomplete
tooff
in a form because the document provides its own auto-completion, then you should also setautocomplete
tooff
for each of the form'sinput
elements that the document can auto-complete.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.
enctype
: StringWhen the value of the
method
attribute ispost
,enctype
is the MIME type of content that is used to submit the form to the server.This value can be overridden by a
formenctype
attribute on a<button>
or<input>
element.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 thetype
attribute set to "file".text/plain
method
: StringThe HTTP method that the browser uses to submit the form.
This value can be overridden by a
formmethod
attribute on a<button>
or<input>
element.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.dialog
Use when the form is inside a
<dialog>
element to close the dialog when submitted.
name
: StringThe name of the form. In HTML 4, its use is deprecated (
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
: Booleantarget
: StringA name or keyword indicating where to display the response that is received after submitting the form. In HTML 4, this is the name/keyword for a frame. In HTML5, it is a name/keyword for a browsing context (for example, tab, window, or inline frame).
HTML5: This value can be overridden by a
formtarget
attribute on a<button>
or<input>
element._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
.iframename
The response is displayed in a named
<iframe>
.
Examples
HTML
<!-- 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>
Result
Desktop | Mobile | |||
---|---|---|---|---|
Chrome | Edge | Chrome | Edge | |
video | 3 | Yes | ? | No |
See also
- HTML forms guide
- Other elements that are used when creating forms:
<button>
,<datalist>
,<fieldset>
,<input>
,<keygen>
,<label>
,<legend>
,<meter>
,<optgroup>
,<option>
,<output>
,<progress>
,<select>
,<textarea>
. - Getting a list of the elements in the form:
HTMLFormElement.elements
- ARIA: Form role
- ARIA: Search role
mdnwebdocs-bot, MaxValue, fbstj, ericwbailey, mfuji09, SphinxKnight, Sheppy, FeRDNYC, teoli, mfluehr, Ambyjkl, tom93, CarloMartini, sideshowbarker, erikadoyle, Hugues-Antoine, absorber, joshkel, jonathanKingston, Sebastianz, wbamberg, cvrebert, ishita, phoenixthunder, dvdrtrgn, mayconrem, Havvy, davidbourguignon, kscarfone, pwdst, tregagnon, medicdude, ethertank, pmmertens, fredrikekelund, kathyw, jswisher, materthron, grendel, cers, fscholz, hobophobe, McGurk