form 表单的一个冷门标签 fieldset 介绍

简要介绍了 form 表单下的一个冷门标签 fieldset 的作用及用法。

目录

在我的印象中,似乎很少见到有人在 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