<form>: The Form element

BaselineWidely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

The<form>HTML element represents a document section containing interactive controls for submitting information.

Try it

<form action="" method="get">  <div>    <label for="name">Enter your name: </label>    <input type="text" name="name" required />  </div>  <div>    <label for="email">Enter your email: </label>    <input type="email" name="email" required />  </div>  <div>    <input type="submit" value="Subscribe!" />  </div></form>

form.form-example {  display: table;}div.form-example {  display: table-row;}label,input {  display: table-cell;  margin-bottom: 10px;}label {  padding-right: 10px;}

It is possible to use the:valid and:invalid CSSpseudo-classes to style a<form> element based on whether theelements inside the form are valid.

Attributes

This element includes theglobal attributes.

acceptDeprecated

Comma-separatedcontent types the server accepts.

Note:This attribute has been deprecated and should not be used. Instead, use theaccept attribute on<input type=file> elements.

accept-charset

Thecharacter encoding accepted by the server.The specification allows a single case-insensitive value of"UTF-8", reflecting the ubiquity of this encoding (historically multiple character encodings could be specified as a comma-separated or space-separated list).

autocapitalize

Controls whether inputted text is automatically capitalized and, if so, in what manner. See theautocapitalize global attribute page for more information.

autocomplete

Indicates whether input elements can by default have their values automatically completed by the browser.autocomplete attributes on form elements override it on<form>. Possible values:

off: The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; seeManaging autofill for login fields.)
on: The browser may automatically complete entries.

name

The name of the form. The value must not be the empty string, and must be unique among theform elements in the forms collection that it is in, if any. The name becomes a property of theWindow,Document, anddocument.forms objects, containing a reference to the form element.

rel

Controls the annotations and what kinds of links the form creates. Annotations includeexternal,nofollow,opener,noopener, andnoreferrer. Link types includehelp,prev,next,search, andlicense. Therel value is a space-separated list of these enumerated values.

Attributes for form submission

The following attributes control behavior during form submission.

action

The URL that processes the form submission. This value can be overridden by aformaction attribute on a<button>,<input type="submit">, or<input type="image"> element. This attribute is ignored whenmethod="dialog" is set.

enctype

If the value of themethod attribute ispost,enctype is theMIME type of the form submission. Possible values:

application/x-www-form-urlencoded: The default value.
multipart/form-data: Use this if the form contains<input> elements withtype=file.
text/plain: Useful for debugging purposes.

This value can be overridden byformenctype attributes on<button>,<input type="submit">, or<input type="image"> elements.

method

TheHTTP method to submit the form with.The only allowed methods/values are (case insensitive):

post: ThePOST method; form data sent as therequest body.
get (default): TheGET; form data appended to theaction URL with a? separator. Use this method when the formhas no side effects.
dialog: When the form is inside a<dialog>, closes the dialog and causes asubmit event to be fired on submission, without submitting data or clearing the form.

This value is overridden byformmethod attributes on<button>,<input type="submit">, or<input type="image"> elements.

novalidate

This Boolean attribute indicates that the form shouldn't be validated when submitted. If this attribute is not set (and therefore the formis validated), it can be overridden by aformnovalidate attribute on a<button>,<input type="submit">, or<input type="image"> element belonging to the form.

target

Indicates where to display the response after submitting the form. It is a name/keyword for abrowsing context (for example, tab, window, or iframe). The following keywords have special meanings:

_self (default): Load into the same browsing context as the current one.
_blank: Load into a new unnamed browsing context. This provides the same behavior as settingrel="noopener" which does not setwindow.opener.
_parent: Load into the parent browsing context of the current one. If no parent, behaves the same as_self.
_top: Load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). If no parent, behaves the same as_self.
_unfencedTop: Load the response from a form inside an embeddedfenced frame into the top-level frame (i.e., traversing beyond the root of the fenced frame, unlike other reserved destinations). Only available inside fenced frames.

This value can be overridden by aformtarget attribute on a<button>,<input type="submit">, or<input type="image"> element.

Examples

html

<!-- Form which will send a GET request to the current URL --><form method="get">  <label>    Name:    <input name="submitted-name" autocomplete="name" />  </label>  <button>Save</button></form><!-- Form which will send a POST request to the current URL --><form method="post">  <label>    Name:    <input name="submitted-name" autocomplete="name" />  </label>  <button>Save</button></form><!-- Form with fieldset, legend, and label --><form method="post">  <fieldset>    <legend>Do you agree to the terms?</legend>    <label><input type="radio" name="radio" value="yes" /> Yes</label>    <label><input type="radio" name="radio" value="no" /> No</label>  </fieldset></form>

Result

Technical summary

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 acceptsflow content
Implicit ARIA role	`form`
Permitted ARIA roles	`search`,`none` or`presentation`
DOM interface	`HTMLFormElement`