最新的Web开发教程
 

HTML form Attribute


定义和用法

form属性指定元素所属的一个或多个的形式。


适用于

form属性可以在下列元素一起使用:

分子 属性
<button> form
<fieldset> form
<input> form
<keygen> form
<label> form
<meter> form
<object> form
<output> form
<select> form
<textarea> form

例子

Button示例

位于外的按钮form (但仍形式的一部分):

<form action="demo_form.asp" 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>
试一试»

Fieldset示例

一个<fieldset>位于形式外界因素(但仍形式的一部分):

<form action="demo_form.asp" 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>
试一试»

Input示例

位于HTML表单外部的输入字段(但仍形式的一部分):

<form action="demo_form.asp" 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">
试一试»

Keygen

一个<keygen>位于形式外界因素(但仍形式的一部分):

<form action="demo_keygen.asp" method="get" id="secureform">
  Username: <input type="text" name="usr_name">
  <input type="submit">
</form>

Encryption: <keygen name="security" form="secureform">
试一试»

Label示例

一个<label>元素位于外窗体(但仍形式的一部分):

<form action="demo_form.asp" 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="Submit">
</form>

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

Meter示例

一个<meter>元素位于外窗体(但仍形式的一部分):

<form action="demo_form.asp" 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>
试一试»

Object实例

一个<object>元素位于外窗体(但仍形式的一部分):

<form action="demo_form.asp" 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>
试一试»

Output示例

一个<output>元素位于外窗体(但仍形式的一部分):

<form action="demo_form.asp" 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="demo_form.asp" 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="demo_form.asp" id="usrform">
  Name: <input type="text" name="usrname">
  <input type="submit">
</form>

<textarea name="comment" form="usrform">Enter text here...</textarea>
试一试»

浏览器支持

form属性为每个元素以下浏览器支持:

元件
button 10.0 不支持 4 5.1 9.5
fieldset 不支持 不支持 不支持 不支持 不支持
input 9 不支持 4 5.1 10.6
keygen 不支持 6
label
meter 不支持 不支持 不支持 不支持 不支持
object 不支持 不支持 不支持 不支持 不支持
output 不支持
select 不支持
textarea 不支持