在我的印象中,似乎很少见到有人在 form 表单中使用 fieldset 标签,可能大家对它都不太了解,但在某些情况下它还是挺有用的,所以在这里对它做点简要介绍。
用途
form 表单的 fieldset 标签可以用于给众多的 input 元素分类,可以组合表单中相关的元素。例子
我们直接看一个例子:对应代码
<form class="fsdemo">
<fieldset>
<legend>基本信息</legend>
<label>姓名:<input type="text"></label><br><br>
<label>年龄:<input type="text"></label>
</fieldset>
<fieldset>
<legend>电话信息</legend>
<label>个人:<input type="text"></label><br><br>
<label>公司:<input type="text"></label>
</fieldset>
<fieldset>
<legend>地址信息</legend>
<label>家庭:<input type="text"></label><br><br>
<label>公司:<input type="text"></label>
</fieldset>
<button>提交</button>
<button>取消</button>
</form>
对应的 CSS 文件(发布后受 wordpress 限制 似乎没有起到效果~)
form.fsdemo {
width: 300px;
margin: auto;
text-align: center;
}
form.fsdemo fieldset {
margin: 5px auto;
}
form.fsdemo fieldset legend {
font-weight: bold;
margin: auto 5px;
}
总结
可以看到 fieldset 可以形成一个包块,通过 fieldset 下的 legend(说明,图例) 标签,可以给每个区块增加一个标签说明,说明文字会浮在 fieldset 所形成的边框之上。这种效果如果你自行用 CSS 来实现恐怕还有点难度呢!而使用 fieldset,不但这些效果唾手可得,而且在语义化方面也更好。
关于 fieldset 的介绍就到这里。更多了解可参考 http://www.w3school.com.cn/tags/tag_fieldset.asp