轻松上手,快乐学习!

HTML form 属性


定义和用法

form 属性指定元素所属的表单。

该属性的值必须等于同一文档中 <form> 元素的 id 属性。


适用于

form 属性可用于以下元素:

元素 属性
<button> form
<fieldset> form
<input> form
<label> form
<meter> form
<object> form
<output> form
<select> form
<textarea> form

实例

Button 实例

位于表单外部的按钮(但仍然是表单的一部分):

<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</button>
亲自试一试 »

Fieldset 实例

位于表单外部的 <fieldset> 元素(但仍然是表单的一部分):

<form action="/action_page.php" method="get" id="form1">
  什么是你最喜欢的颜色?<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>
亲自试一试 »

Input 实例

位于 HTML 表单之外的输入字段(但仍然是表单的一部分):

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

Last name: <input type="text" name="lname" form="form1">
亲自试一试 »

Label 实例

位于表单外部的 <label> 元素(但仍然是表单的一部分):

<form action="/action_page.php" id="form1">
  <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="提交">
</form>

<label for="male" form="form1">Male</label>
亲自试一试 »

Meter 实例

位于表单外部的 <meter> 元素(但仍然是表单的一部分):

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
</form>
<meter form="form1" name="x1" min="0" low="40" high="90" max="100" value="95"></meter>
亲自试一试 »

Object 实例

位于表单外部的 <object> 元素(但仍然是表单的一部分):

<form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
</form>
<object data="helloworld.swf" height="400" width="400" form="form1" name="obj1"></object>
亲自试一试 »

Output 实例

位于表单外部的 <output> 元素(但仍然是表单的一部分):

<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>
亲自试一试 »

Select 实例

位于表单外部的下拉列表(但仍然是表单的一部分):

<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>
亲自试一试 »

Textarea 实例

位于表单外部的文本区域(但仍然是表单的一部分):

<form action="/action_page.php" id="usrform">
  Name: <input type="text" name="usrname">
  <input type="submit">
</form>
<textarea name="comment" form="usrform">在此处输入文字...</textarea>
亲自试一试 »

浏览器支持

form 属性对每个元素都有以下浏览器支持:

元素
button 10.0 不支持 4.0 5.1 9.5
fieldset 不支持 不支持 不支持 不支持 不支持
input 9.0 不支持 4.0 5.1 10.6
label Yes Yes Yes Yes Yes
meter 不支持 不支持 不支持 不支持 不支持
object 不支持 不支持 不支持 不支持 不支持
output Yes 不支持 Yes Yes Yes
select Yes 不支持 Yes Yes Yes
textarea Yes 不支持 Yes Yes Yes