使用 fieldset 和 legend 标签可对html表单进行逻辑分组，提升可读性与可访问性；fieldset 作为容器包裹相关控件，legend 作为首子元素定义分组标题，语义清晰且利于屏幕阅读器识别，配合 label 和 css 可优化体验与布局。
在HTML表单中，为了提升可读性和用户体验，常常需要对相关表单元素进行逻辑分组。这种分组不仅有助于视觉上的组织，还能增强语义结构，便于屏幕阅读器等辅助工具理解。实现表单逻辑分组的核心方法是使用 fieldset 和 legend 标签。
使用 fieldset 进行表单区域划分
fieldset 是HTML中专门用于将表单控件进行逻辑分组的容器标签。浏览器通常会在其周围绘制一个边框，把一组相关的输入项包围起来，形成一个视觉区块。
常见应用场景包括：用户基本信息、联系方式、兴趣爱好、安全问题等分类。
- 所有相关输入元素放在同一个 fieldset 内部
- 支持嵌套，但一般不建议多层嵌套以免结构混乱
- 可配合CSS轻松定制边框样式、间距和布局
通过 legend 添加分组标题
legend 标签必须作为 fieldset 的第一个子元素出现，用于定义该分组的标题或说明。它会显示在 fieldset 边框线上，通常是左上角位置，具有良好的可访问性支持。
立即学习“前端免费学习笔记（深入）”；
例如，在“性别选择”分组中，legend 可以写为“请选择您的性别”，让使用者明确这一组的作用。
- 每个 fieldset 最好包含一个 legend，否则语义不完整
- legend 文本应简洁明了，准确描述组内控件功能
- 对残障用户友好，能被读屏软件正确播报
实际代码示例
下面是一个注册表单中使用 fieldset 和 legend 进行分组的典型例子：
<form action="/submit" method="post">
<fieldset>
<legend>个人信息</legend>
<label>
姓名：
<input type="text" name="name" required>
</label>
<label>
年龄：
<input type="number" name="age">
</label>
</fieldset>
<fieldset>
<legend>兴趣爱好</legend>
<label>
<input type="checkbox" name="hobby" value="reading"> 阅读
</label>
<label>
<input type="checkbox" name="hobby" value="sports"> 运动
</label>
</fieldset>
</form>
结合CSS与可访问性的优化建议
虽然 fieldset 和 legend 自带默认样式，但可通过CSS进一步美化外观，比如去除边框、调整颜色或修改 legend 位置。
- 避免隐藏 legend，即使视觉上不需要也应保留文本（可用 aria-label 替代）
- 确保移动端适配，fieldset 在小屏幕上可能需要调整宽度
- 配合 label 标签使用，提升整体表单的可用性和SEO表现
基本上就这些。合理使用 fieldset 与 legend 能让表单结构更清晰，维护更容易，也更符合无障碍网页设计标准。不复杂但容易忽略。
