<form>
The <form> element collects controls into a submission context. It manages submission, validation, related controls, and associations across the document.
Overview
The <form> element collects controls into a submission context. It manages submission, validation, related controls, and associations across the document.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3 | 18 | 2 | |
| HTML attribute | ||||||
accept-charset | 1 | 12 | 1 | 3 | 18 | 2 |
action | 1 | 12 | 1 | 3 | 18 | 2 |
| The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. | 14 | 12 | 4 | 6 | 18 | 6 |
enctype | 1 | 12 | 1 | 3 | 18 | 2 |
method | 1 | 12 | 1 | 3 | 18 | 2 |
name | 1 | 12 | 1 | 3 | 18 | 2 |
novalidate | 10 | 12 | 4 | 10.1 | 18 | 10.3 |
| The rel attribute defines the relationship between a linked resource and the current document. Valid on link, a, area, and form, the supported values depend on the element on which the attribute is found. | 108 | 108 | 111 | 15.4 | 108 | 15.4 |
target | 1 | 12 | 1 | 3 | 18 | 2 |
| DOM API | ||||||
| The FormDataEvent interface represents a formdata event — such an event is fired on an HTMLFormElement object after the entry list representing the form's data is constructed. This happens when the form is submitted, but can also be triggered by the invocation of a FormData.FormData constructor. | 77 | 79 | 72 | 15 | 77 | 15 |
| The formData read-only property of the FormDataEvent interface contains the FormData object representing the data contained in the form when the event was fired. | 77 | 79 | 72 | 15 | 77 | 15 |
| The FormDataEvent() constructor creates a new FormDataEvent object. | 77 | 79 | 72 | 15 | 77 | 15 |
| The HTMLFormControlsCollection interface represents a collection of HTML form control elements, returned by the HTMLFormElement interface's HTMLFormElement.elements property. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLFormControlsCollection.namedItem() method returns the RadioNodeList or the Element in the collection whose name or id match the specified name, or null if no node matches. | 1 | 12 | 33 | 3 | 18 | 1 |
| The HTMLFormElement interface represents a form element in the DOM. It allows access to—and, in some cases, modification of—aspects of the form, as well as access to its component elements. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLFormElement.acceptCharset property represents the character encoding for the given form element. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLFormElement.action property represents the action of the form element. | 1 | 12 | 1 | 3 | 18 | 1 |
| The autocomplete property of the HTMLFormElement interface indicates whether the value of the form's controls can be automatically completed by the browser. It reflects the form element's autocomplete attribute. | 14 | 12 | 4 | 6 | 18 | 6 |
| The elements property of the HTMLFormElement interface returns an HTMLFormControlsCollection listing all the listed form controls associated with the form element. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLFormElement.encoding property is an alternative name for the HTMLFormElement.enctype element on the DOM HTMLFormElement object. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLFormElement.enctype property is the MIME_type of content that is used to submit the form to the server. Possible values are: | 1 | 12 | 1 | 3 | 18 | 1 |
| The formdata event fires after the entry list representing the form's data is constructed. This happens when the form is submitted, but can also be triggered by the invocation of a FormData.FormData constructor. | 77 | 79 | 72 | 15 | 77 | 15 |
| The HTMLFormElement.length read-only property returns the number of controls in the form element. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLFormElement.method property represents the HTTP method used to submit the form. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLFormElement.name property represents the name of the current form element as a string. | 1 | 12 | 1 | 3 | 18 | 1 |
| The noValidate property of the HTMLFormElement interface is a boolean value indicating if the form will bypass constraint validation when submitted. It reflects the element's novalidate attribute; if the attribute present, the value is true. | 4 | 12 | 4 | 5 | 18 | 4 |
| The rel property of the HTMLFormElement interface reflects the rel attribute. It is a string containing what kinds of links the HTML form element creates, as a space-separated list of enumerated values. | 108 | 108 | 111 | 15.4 | 108 | 15.4 |
| The read-only relList property of the HTMLFormElement returns a live DOMTokenList object containing the set of link types indicating the relationship between the resource represented by the form element and the current document. It reflects the form element's rel content attribute. | 108 | 108 | 111 | 15.4 | 108 | 15.4 |
| The HTMLFormElement method requestSubmit() requests that the form be submitted using a specific submit button. | 76 | 79 | 75 | 16 | 76 | 16 |
| The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's control. | 1 | 12 | 1 | 3 | 18 | 1 |
| The reset event fires when a form is reset. | 1 | 12 | 6 | 3 | 18 | 1 |
| The HTMLFormElement.submit() method submits a given form. | 1 | 12 | 1 | 3 | 18 | 1 |
| The submit event fires when a form is submitted. | 1 | 12 | 1 | 3 | 18 | 1 |
| The target property of the HTMLFormElement interface represents the target of the form's action (i.e., the frame in which to render its output). | 1 | 12 | 1 | 3 | 18 | 1 |
| The SubmitEvent interface defines the object used to represent an HTML form's HTMLFormElement.submit_event event. This event is fired at the form when the form's submit action is invoked. | 81 | 81 | 75 | 15 | 81 | 15 |
| The SubmitEvent() constructor creates and returns a new SubmitEvent object, which is used to represent a HTMLFormElement.submit_event event fired at an HTML form. | 81 | 81 | 75 | 15 | 81 | 15 |
| The read-only submitter property found on the SubmitEvent interface specifies the submit button or other element that was invoked to cause the form to be submitted. | 81 | 81 | 75 | 15.4 | 81 | 15.4 |
- 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` attribute 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.
- The Chrome Android 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` attribute is not set, then if the user asks for autofill suggestions for the `<input>` element, Chrome Android 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.
- This browser only partially implements this feature
- This feature was removed in a later browser version (33)
- Returned a `NodeList` instead of a `RadioNodeList`.
- This browser only partially implements this feature
- This feature was removed in a later browser version (15.4)
- Property is not set for `<button>` elements. See bug 229660.
- This browser only partially implements this feature
- This feature was removed in a later browser version (15.4)
- Property is not set for `<button>` elements. See bug 229660.
Syntax
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form> Live demo
Use cases
Data entry flows
Collect account details, contact information, feedback, or checkout data in a structured, submittable unit.
Search and filtering
Wrap search bars and filter controls so Enter key submission and control relationships work naturally.
Cautions
- Nested forms are invalid, so complex layouts should still belong to a single form or separate independent forms.
- Submission and validation behavior should be explicit, especially when JavaScript customizes the flow.
Accessibility
- Forms need visible labels, clear error handling, and an understandable submission outcome.
Related links
Powered by web-features