HTML form Attribute

The form attribute on an input 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>.

Example

#

A form attribute on an <input> tag.
Although outside the form, this input field is included during form submission.

Personal Information


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


Using form

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.


Syntax

<tagname form="form-id">

Values

#

Value Description
form-id The id value of the form.

Elements that accept 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.

<select> with form

A <select> tag with a form attribute.
Although outside the form, the dropdown is included during form submission. .

Product Details


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


<textarea> with form

A <textarea> tag with a form attribute.
Although outside the form, the textarea is included during form submission.

Product Information

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


<button> with form

A <button> tag with a form attribute.
Althought outside the form, the button can submit the form.

Address Information





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


<meter> with form

A <meter> tag with a form attribute.
Although outside the form, this element is associated with the form.

Project Information


Project completion: 80%
90%
<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.


<output> with form

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.

Pipe Pressure


The value is 25

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


<object> with form

An <object> tag with a form attribute.
This object is now associated with the form.

Art Information


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


<fieldset> with form

A <fieldset> tag with a form attribute.
All elements inside the second fieldset are included during form submission.

Personal Information




Contact Information





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


Browser support

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

You may also like



Guides