Theform HTML attribute associates a form-associated element with a<form> element within the same document. This attribute applies to the<button>,<fieldset>,<input>,<object>,<output>,<select>, and<textarea> elements.

Values

Theid of the<form> element that the element should be associated with.

Usage notes

By default, form controls are associated with their nearest ancestor<form> element, while form controls that are not nested within a<form> are not associated with any form. Theform attribute enables overriding these default behaviors.

Theform attribute of the<button>,<fieldset>,<input>,<object>,<output>,<select>, and<textarea> elements allows you to specify an explicit form owner, enabling you to associate form controls located anywhere within a document with any<form> element located in the same document.

When a form is submitted, the names and values of the<form> element's associated controls are submitted, whether or not they are physically nested within that<form>, and even if they are nested in a different<form>.

A control'sform attribute takes as its value theid of the<form> element you want to associate the control with. All other values set for theform attribute are ignored.

While setting the attribute value to theid of the nearest ancestor<form> isn't necessary, explicitly defining the association between a form control and its nearest ancestor form ensures the form control will not be disassociated from its form if scripts or malformed HTML result in that specific<form> not being the nearest form ancestor of the control.

Associating with a non-ancestor form

Theform attribute can be used to associate a form control nested in one<form> with another<form>.

In this code example, the username<input> is nested within theinternalForm, but theform attribute disassociates the control from its ancestor form in which it is nested, and associates it with theexternalForm instead:

<form></form><form>  <label for="username">Username:</label>  <input form="externalForm" type="text" name="username" /></form>

In this case, the username will be submitted when theexternalForm is submitted, while theinternalForm has no associated form controls.

Non-inheritance of theform attribute

Theform attribute only associates the element on which it is set. The attribute behavior is not inherited. For example, when theform attribute is set on a<fieldset> element, it only associates the<fieldset>; it doesnot automatically associate the form controls nested within that<fieldset>.

In this example, the<fieldset> andusername<input> are associated with theexampleForm, and included in theHTMLFormControlsCollection of theHTMLFormElement.elements property, but thepassword is not. Only theusername will be included when theexampleForm is submitted:

<form></form><fieldset form="exampleForm">  <legend>Login information</legend>  <label    >Username: <input form="exampleForm" type="text" name="username"  /></label>  <label>Password: <input type="password" name="password" /></label></fieldset>

Each nested element needs its ownform attribute or must be nested inside the form. You can check which elements are associated with a form via JavaScript, usingHTMLFormElement.elements.

Form submission

Including theform attribute does not mean the element will be submitted with the form. Only submittable elements, including<button>,<input>,<select>, and<textarea>, have their name and values submitted when their associated<form> is submitted.

In this case, even though the<output> is implicitly then explicitly associated with thecalcForm, theresult is not submitted along witha andb whencalcForm is submitted. It is, however, part of the form'sHTMLFormControlsCollection.

<form>  <label>First number: <input value="2" type="number" /></label>  <label>Second number: <input value="3" type="number" /></label>  <label>Sum: <output name="result" for="a b" form="calcForm">5</output></label></form>

Examples

Basic example

This example demonstrates how form-associated elements can be associated with a<form> element using theform attribute, even if they are not explicitly nested inside it. All of the form-associated elements shown in this example are associated with theloginForm either implicitly (by being directly nested inside the form), or explicitly via theform attribute. When the login form is submitted, the names and values of each submittable element will be included.

<form>  <label>Username: <input type="text" name="username" /></label></form><label  >Password: <input form="loginForm" type="password" name="password"/></label><label>  Choose an option:  <select form="loginForm" name="options">    <option value="A">A</option>    <option value="B">B</option>  </select></label><label  >Description:  <textarea form="loginForm" rows="4" name="description">Hello, World!</textarea  ></label><button form="loginForm" type="submit" name="submitLogin" value="Login">  Submit</button>

Element associated with a different form

In this example, we have two<form> elements:parentForm andtargetForm. The<button> insideparentForm has itsform attribute set totargetForm, disassociating it from its nearest ancestorparentForm, while associating it with thetargetForm. When the submit button is activated, it submits thetargetForm, not itsparentForm ancestor.

<form>  <input type="text" name="targetInput" /></form><form>  <button form="targetForm" type="submit" name="submitTarget" value="Target">    Submit target form  </button></form>

Specifications

Browser compatibility

html.elements.button.form

html.elements.fieldset.form

html.elements.input.form

html.elements.object.form

html.elements.output.form

html.elements.select.form

html.elements.textarea.form

See also

• Overriding default form behaviors