fieldset标签用于表单元素分组，配合legend添加标题，提升语义化与可读性。如联系信息分组包含邮箱、电话输入项，浏览器默认渲染带边框区域，顶部左侧显示“联系信息”标题。实际应用于注册页、问卷调查等多内容场景，支持CSS自定义样式，增强视觉层次。fieldset与legend组合优化屏幕阅读器识别，保障无障碍访问，优于div模拟分组，推荐在项目中规范使用以提升用户体验和维护性。
在HTML表单中，fieldset标签用于将表单内的相关元素进行分组，提升可读性和语义化结构。配合legend标签使用，可以为每组添加标题，使用户更清晰地理解表单内容的逻辑划分。
基本语法与结构
fieldset标签包裹一组相关的表单控件，通常内部包含一个legend标签作为该组的说明标题。
<legend>联系信息</legend>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br>
<label for="phone">电话：</label>
<input type="tel" id="phone" name="phone">
</fieldset>
上述代码会渲染出一个带边框的区域，顶部左侧显示“联系信息”作为组标题，下方是邮箱和电话输入项。
实际应用场景
当表单内容较多时，使用fieldset能有效组织信息。例如注册页面可能分为“基本信息”、“账户设置”、“偏好选择”等部分。
立即学习“前端免费学习笔记（深入）”；
- 用户信息收集表单中的“个人资料”、“工作经历”分组
- 问卷调查中不同主题的问题区块
- 多步骤表单中每个步骤的内容容器
样式控制与自定义外观
默认情况下，浏览器会给fieldset添加边框和外边距。可通过CSS完全自定义其样式。
border: 2px solid #007BFF;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
background-color: #f9f9f9;
}
legend {
font-weight: bold;
color: #0056b3;
padding: 0 10px;
background-color: transparent;
}
通过这些样式规则，可以让分组区域更符合整体页面设计风格，同时增强视觉层次感。
辅助功能与语义优势
fieldset和legend组合对屏幕阅读器非常友好。视障用户能通过它们快速了解当前控件所属的逻辑组，显著提升表单可用性。
避免用纯div加样式模拟分组，原生语义标签不仅简化开发，也保障了更好的无障碍支持。
基本上就这些。合理使用fieldset能让表单结构更清晰，维护更容易，用户体验更好。不复杂但容易忽略的小细节，值得在项目中重视起来。
