<form>: The Form element
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The<form>HTML element represents a document section containing interactive controls for submitting information.
In this article
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.
acceptDeprecatedComma-separatedcontent types the server accepts.
Note:This attribute has been deprecated and should not be used. Instead, use the
acceptattribute on<input type=file>elements.accept-charsetThecharacter 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).autocapitalizeControls whether inputted text is automatically capitalized and, if so, in what manner. See the
autocapitalizeglobal attribute page for more information.autocompleteIndicates whether input elements can by default have their values automatically completed by the browser.
autocompleteattributes 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.
nameThe name of the form. The value must not be the empty string, and must be unique among the
formelements in the forms collection that it is in, if any. The name becomes a property of theWindow,Document, anddocument.formsobjects, containing a reference to the form element.relControls the annotations and what kinds of links the form creates. Annotations include
external,nofollow,opener,noopener, andnoreferrer. Link types includehelp,prev,next,search, andlicense. Therelvalue is a space-separated list of these enumerated values.
Attributes for form submission
The following attributes control behavior during form submission.
actionThe URL that processes the form submission. This value can be overridden by a
formactionattribute on a<button>,<input type="submit">, or<input type="image">element. This attribute is ignored whenmethod="dialog"is set.enctypeIf the value of the
methodattribute ispost,enctypeis 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 by
formenctypeattributes on<button>,<input type="submit">, or<input type="image">elements.methodTheHTTP method to submit the form with.The only allowed methods/values are (case insensitive):
post: ThePOSTmethod; form data sent as therequest body.get(default): TheGET; form data appended to theactionURL 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 asubmitevent to be fired on submission, without submitting data or clearing the form.
This value is overridden by
formmethodattributes on<button>,<input type="submit">, or<input type="image">elements.novalidateThis 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 a
formnovalidateattribute on a<button>,<input type="submit">, or<input type="image">element belonging to the form.targetIndicates 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 a
formtargetattribute on a<button>,<input type="submit">, or<input type="image">element.
Examples
<!-- 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 orpresentation |
| DOM interface | HTMLFormElement |
Specifications
| Specification |
|---|
| HTML> # the-form-element> |
Browser compatibility
See also
- HTML forms guide
- Other elements that are used when creating forms:
<button>,<datalist>,<fieldset>,<input>,<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