更新时间:2014年6月20日

fieldset元素(表格输入项目集合化)

<fieldset><legend>~</legend></fieldset>

使用fieldset元素使表格输入项目集合化。<fieldset>~</fieldset>与其中的input元素select元素textarea元素等表格组成部分,构成一个集合体。一般的浏览器会在集合体的外面添加线框。

该元素的最初位置放legend元素

属性

1、disabled内容属性
该属性为逻辑属性,如果指定该值,该当fieldset元素中的表格控制将无效。
2、form内容属性
指定想要建立链接的表格的id名称。
3、name内容属性
设定该元素的名称

使用例

<form action="example.cgi" method="post">

<fieldset form="frm">

<legend>商品:</legend>

<p><label>商品名称:<input type="tel" name="tel"/></label></p>

<p><label>商品数量:<input type="email" name="mail"></label></p>

</fieldset>

<fieldset disabled="disabled" >

<legend>住址:</legend>

<p><label><input type="text" name="number"></label></p>

<p><label>省份:<select name="sheng">

<option value="10">山东省</option>

</select>

</label>

</p>

</fieldset><br>

<fieldset form="frm">

<legend>联系方法:</legend>

<p><label>电话号码:<input type="tel" name="tel"/></label></p>

<p><label>eMail:<input type="email" name="mail"></label></p>

</fieldset>

</form>

<form method="get" action="#" id="frm">

<input type="submit" value="送信"/>

</form>

浏览器上的显示结果↓


商品:

住址:


联系方法:

X

浏览器支持情况

元素
fieldset yes yes yes yes yes