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:

HTML form attribute for button element 

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