The form attribute on an element specifies the form the element is associated with.
This element will be included during form submission.
Elements that accept this attribute include <input>, <select>, <textarea>, <button>, <meter>, <output>, <object>, and <fieldset>.
An <input> element with a form attribute. Although outside the form, this input field is included during form submission.
<form action="/tutorial/action.html" id="myform">
<fieldset>
<legend>Personal Information</legend>
<input type="text" name="firstname"
placeholder="First name"><br /><br />
<input type="submit" value="Submit">
</fieldset>
</form> <br />
<input form="myform"
type="text" name="lastname"
placeholder="Last name">
For additional details see our HTML input form Reference.
The form attribute specifies which form the element belongs to.
This attribute value is the id of the form.
Once associated to a form, the element is part of that form's submission.
<tagname form="form-id">
| Value | Description |
|---|---|
| form-id | The id value of the form. |
The following elements accept the form attribute.
| Elements | Description | |
|---|---|---|
| <input> | Specifies an input field -- see example above | |
| <select> | Creates a dropdown field. | |
| <textarea> | Specifies a multi-line text input field. | |
| <button> | Creates a clickable button. | |
| <meter> | Displays a gauge. | |
| <output> | Displays the result of a calculation. | |
| <object> | Adds a media object into the page. | |
| <fieldset> | Groups related input elements. |
A <select> tag with a form attribute.
Although outside the form, the dropdown is included during form submission. .
<form action="/tutorial/action.html" id="size-form">
<fieldset>
<legend>Product Details</legend>
<input type="text" name="product"
placeholder="Product name"><br /><br />
<input type="submit" value="Submit">
</fieldset>
</form> <br />
<select name="size" form="size-form">
<option value="">-- Select Size--</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
For additional details see our HTML select form Reference.
A <textarea> tag with a form attribute.
Although outside the form, the textarea is included during form submission.
<form action="/tutorial/action.html" id="product-form">
<fieldset>
<legend>Product Information</legend>
<input type="text" name="product"
placeholder="Product name"><br /><br />
<input type="submit" value="Submit">
</fieldset>
</form>
<textarea form="product-form"
placeholder="Description" cols="55"
id="description" name="description" ></textarea>
For additional details see our HTML textarea form Reference.
A <button> tag with a form attribute.
Although outside the form, the button can submit the form.
<form action="/tutorial/action.html" id="address-form">
<fieldset>
<legend>Address Information</legend>
<input type="text" name="street" placeholder="Street"><br /><br />
<input type="text" name="city" placeholder="City"><br /><br />
<input type="text" name="country" placeholder="Country"><br /><br />
</fieldset>
</form>
<button form="address-form"
type="submit" >Submit</button>
For additional details see our HTML button form Reference.
A <meter> tag with a form attribute.
Although outside the form, this element is associated with the form.
<form action="/tutorial/action.html" id="project-form">
<fieldset>
<legend>Project Information</legend>
<input type="text" name="name" placeholder="Project name"><br /><br />
<input type="submit" value="Submit">
</fieldset>
</form> <br />
<div>Project completion: 80%</div>
<meter form="project-form"
value="0.8" name="completion">90%</meter>
Note: The meter value is not submitted during form submission.
For additional details see our HTML meter form Reference.
An <output> tag with a form attribute. Although outside the form, this element is associated with the form. Move the slider to see the output value update.
The value is
<form action="/tutorial/action.html" id="pressure-form"
oninput="result.value = slider.value">
<fieldset>
<legend>Pipe Pressure</legend>
<input type="range" id="slider" name="pressure"
value="25"><br /><br />
<input type="submit" value="Submit">
</fieldset>
</form> <br />
<p>The value is
<output form="pressure-form" name="result" for="slider">25</output>
</p>
Note: The output value is not submitted during form submission.
For additional details see our HTML output form Reference.
An <object> tag with a form attribute.
This object is now associated with the form.
<form action="/tutorial/action.html" id="document-form"
oninput="result.value = slider.value">
<fieldset>
<legend>Art Information</legend>
<input type="text" name="name"
placeholder="Title of painting"><br /><br />
<input type="submit" value="Submit">
</fieldset>
</form> <br />
<object form="document-form" data="/img/html/poppies.jpg"
type="image/jpg" name="poppies">
</object>
Note: The object value is not submitted during form submission.
For additional details see our HTML object form Reference.
A <fieldset> tag with a form attribute.
All elements inside the second fieldset are included during form submission.
<form action="/tutorial/action.html" method="get" id="main-form">
<fieldset>
<legend>Personal Information</legend>
<input type="text" name="fname" placeholder="First name"><br /><br />
<input type="text" name="lname" placeholder="Last name"><br /><br />
<input type="submit" value="Submit">
</fieldset>
</form> <br />
<fieldset form="main-form">
<legend>Contact Information</legend>
<input type="text" form="main-form" name="street" placeholder="Street"><br /><br />
<input type="text" form="main-form" name="city" placeholder="City"><br /><br />
<input type="text" form="main-form" name="country" placeholder="Country"><br /><br />
</fieldset>
Note: For this to work, the input elements inside the second fieldset must also have a form attribute.
For additional details see our HTML fieldset form Reference.
Here is when form support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
10.6 | Jul 2010 |
 Safari
|
5.1 | Oct 2011 |
