Widely availableEssential for user input flows that submit, validate, or coordinate multiple fields together.

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
1+Supported (version) Not supported Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • 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.
Notes 1 item(s)
Implementation note
  • 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.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (33)
Implementation note
  • Returned a `NodeList` instead of a `RadioNodeList`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (15.4)
Implementation note
  • Property is not set for `<button>` elements. See bug 229660.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (15.4)
Implementation note
  • Property is not set for `<button>` elements. See bug 229660.

Syntax

HTML
<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

Login form

basic roginform.required valid-tion with.

PreviewFullscreen

Searchform

shinpl searchba-.search type and pre-sholda- usage.

PreviewFullscreen

combineform

:valid /:invalid style apply. with Multiplefield. form.CSS.

PreviewFullscreen

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.

Powered by web-features