HTML form Attribute

HTML form Attribute: This attribute defines one or more forms that the elements belong to. And the owner of the element will indicate the form.

HTML form Attribute

This attribute can be applied to <button>, <fieldset>, <input>, <label>, <meter>, <object>,<output>, <select>, <textarea> elements.

Browser Support

Element	Chrome	Internet Explorer	Firefox	Safari	Opera
button	10.0	Not supported	4.0	5.1	9.5
fieldset	Not supported	Not supported	Not supported	Not supported	Not supported
input	9.0	Not supported	4.0	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	Yes	Not supported	Yes	Yes	Yes
select	Yes	Not supported	Yes	Yes	Yes
textarea	Yes	Not supported	Yes	Yes	Yes

Example 1: for <button> element

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get" id="nameform">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<p>The button below is outside the form element, but still part of the form.</p>
<button type="submit" form="nameform" value="Submit">Submit</button>
</body>
</html>

Output:

Example 2: <fieldset> element

<!DOCTYPE html>
<html>
<body>
<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">
  <legend>Bio-data</legend>
  Name: <input type="text" name="username"><br>
  Email: <input type="text" name="usermail"><br>
</fieldset>
</body>
</html>

Output:

HTML form attribute fieldset element

Example 3: <label> element

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" id="form1">
  <label for="male"> Male </label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>
<label for="male" form="form1">Male</label>
</body>
</html>

Output:

HTML label element

Example 4: <meter> element

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
<p>Displaying  gauge</p>
<p> score: <meter form="form1"  min="0" low="40" high="90" max="100" value="95"></meter></p>
</body>
</html>

Output:

HTML form attribute meter element

Example 5: <object> element

<!DOCTYPE html>
<html>
<body>
<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" width="400" height="400" name="obj1" form="form1"></object>
</body>
</html>

Output:

HTML object element

Example 6: for <output> element

<!DOCTYPE html>
<html>
<body>
<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>
<p>The output element below is outside the form, but still a part of it.</p>
<output form="numform" name="x" for="a b"></output>
<p><strong>Note:</strong> The form attribute is not supported in IE/Edge</p>
</body>
</html>

Output:

HTML form attribute output element

Example 7: for <select> element

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" id="carform">
  Firstname:<input type="text" name="fname">
  <input type="submit">
</form>
<br>
<select name="Programming Languages" form="Programming Languages">
  <option value="HTML">HTML</option>
  <option value="CSS">CSS</option>
  <option value="JAVA">JAVA</option>
  <option value="C">C</option>
</select>
</body>
</html>

Output:

HTML select element

Example 8: <textarea> element

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" id="usrform">
  Name: <input type="text" name="usrname">
  <input type="submit">
</form>
<br>
<textarea rows="4" cols="50" name="comment" form="usrform">
Enter text here...</textarea>
<p>The text area above is outside the form element, but should still be a part of the form.</p>
</body>
</html>

Output:

HTML textarea element