Fieldset教你如何绘制带标题的表单框
时间：2020-08-23来源：杨青青个人博客作者：杨青青
一朋友问我像这样的表单样式是怎么实现的，我看到图，第一眼的印象应该是用图片来实现的，或者是用postion来定位实现的。
如果是我写的话，肯定会用到图片当背景，或者给“个人资料”定义一个position。表单样式就是因为接触太少了，看了源码后，觉得这真是一个不错的设计。搜索<legend> 标签，才知legend 元素为 fieldset 元素定义标题。
fieldset 元素可将表单内的相关元素分组。当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<legend> 标签为 fieldset 元素定义标题。
实例：
<!DOCTYPE HTML>
<html>
<body>
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
</body>
</html>
在此非常感谢多多，表单这样式还真的是第一次用到，以后估计会常用了，这功能不错
你觉得文章内容怎么样
网页前端设计快速入门技巧
鼠标悬停图片、文字css3效果
从摄影作品中获取网页颜色搭配技巧
给个人博客增加色彩元素提升网站用户体验