Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.