HTML form Attribute


Definition and Usage

The form attribute specifies the form the element belongs to.

The value of this attribute must be equal to the id attribute of a <form> element in the same document.


Applies to

The form attribute can be used on the following elements:

Elements Attribute
<button> form
<fieldset> form
<input> form
<label> form
<meter> form
<object> form
<output> form
<select> form
<textarea> form

Examples

Button Example

A button located outside a form (but still a part of the form):

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>

<button type="submit" form="form1" value="Submit">Submit</button>
Try it Yourself »

Fieldset Example

A <fieldset> element located outside a form (but still a part of the form):

<form action="/action_page.php" method="get" id="form1">
  What is your favorite color? <input type="text" name="fav_color"><br>
  <input type="submit">
</form>

<fieldset form="form1">
  Name: <input type="text" name="username"><br>
  Email: <input type="text" name="usermail"><br>
</fieldset>
Try it Yourself »

Input Example

An input field located outside the HTML form (but still a part of the form):

<form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">
Try it Yourself »

Label Example

A <label> element located outside a form (but still a part of the form):

<form action="/action_page.php" id="form1">
  <input type="radio" id="html" name="fav_language" value="HTML"><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

<label for="html">HTML</label>
Try it Yourself »

Meter Example

A <meter> element located outside a form (but still a part of the form):

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

<meter form="form1" name="x1" min="0" low="40" high="90" max="100" value="95"></meter>
Try it Yourself »

Object Example

An <object> element located outside a form (but still a part of the form):

<form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

<object data="helloworld.swf" height="400" width="400" form="form1" name="obj1"></object>
Try it Yourself »

Output Example

An <output> element located outside a form (but still a part of the form):

<form action="/action_page.php" id="numform"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" name="a" value="50">100
+<input type="number" id="b" name="b" value="50">
<br><br>
<input type="submit">
</form>

<output form="numform" name="x" for="a b"></output>
Try it Yourself »

Select Example

A drop-down list located outside a form (but still a part of the form):

<form action="/action_page.php" id="carform">
  Firstname:<input type="text" name="fname">
  <input type="submit">
</form>

<select name="carlist" form="carform">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
Try it Yourself »

Textarea Example

A text area located outside a form (but still a part of the form):

<form action="/action_page.php" id="usrform">
  Name: <input type="text" name="usrname">
  <input type="submit">
</form>

<textarea name="comment" form="usrform">Enter text here...</textarea>
Try it Yourself »

Browser Support

The form attribute has the following browser support for each element:

Element
button 10.0 16.0 4.0 5.1 9.5
fieldset Yes Yes Yes Yes Yes
input Yes Yes Yes 5.1 10.6
label Yes Yes Yes Yes Yes
meter Not supported Not supported Not supported Not supported Not supported
object Not supported Not supported Not supported Not supported Not supported
output Not supported Not supported Not supported Not supported Not supported
select Yes Yes Yes Yes Yes
textarea Yes 11.0 Yes Yes Yes

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.