HTML form Attribute

HTML form Attribute

The HTML form attribute explicitly associates a form-associated element with a <form> element. It allows a control to belong to a form even when the control is located outside the form element in the HTML document.

Syntax

The value of the form attribute must match the id of a <form> element in the same document tree.

<form id="contact-form">
  ...
</form>

<input type="email" name="email" form="contact-form">

In this example, the input belongs to the form with id="contact-form" even though the input is not nested inside that form.

Elements That Use the form Attribute

The form content attribute can explicitly specify a form owner for listed form-associated elements.

Matching the Form id

The form attribute associates an element with a form by referencing the form's id.

<form id="account-form" action="result.php" method="post">
  <input type="text" name="username">
</form>

<button type="submit" form="account-form">Submit</button>

The button is outside the <form> element, but form="account-form" makes it a submit button for that form.

Controls Outside a Form

Normally, a form-associated element is associated with its nearest ancestor <form>. The form attribute makes it possible to associate a listed control with a form without placing the control inside the form.

<form id="profile-form" action="result.php" method="post">
  <input type="text" name="first-name">
</form>

<input type="text" name="last-name" form="profile-form">

When profile-form is submitted, both the nested first-name control and the external last-name control can participate in the form submission.

Overriding the Form Owner

The form attribute can also explicitly associate a control with a different form instead of its nearest ancestor form.

<form id="form-one">
  <input type="text" name="message" form="form-two">
</form>

<form id="form-two">
</form>

Although the input appears inside form-one, its form="form-two" attribute explicitly associates it with form-two.

The form Attribute Is Not Inherited

Setting the form attribute on a container such as <fieldset> does not automatically associate its descendant controls with the same form.

<fieldset form="registration-form">
  <input type="text" name="username" form="registration-form">
</fieldset>

If a descendant control is outside the target form and needs to belong to it, that control must establish its own form association.

Common Mistakes

Do not use the form's name as the value of the form attribute. The value must match the target form's id.

Do not assume that the form attribute is inherited by descendant controls. Associating a <fieldset> with a form does not automatically associate every control inside that fieldset with the same form.

Make sure the referenced form exists in the same document tree and has the matching id. Otherwise, the attribute does not establish the intended form association.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The form attribute is widely supported on form-associated elements in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the form Attribute

The example places one input outside its <form> element and uses the form attribute to associate it with the form. Submit the form to see that both fields are included.

Summary

The HTML form attribute explicitly associates a listed form-associated element with a <form> element by referencing the form's id. It allows controls to belong to a form without being nested inside it and can override the form association that an element would otherwise receive from an ancestor form. The attribute is not inherited by descendant controls.