fieldset 与 legend 标签用于表单分组,提升可读性和可访问性;fieldset 包裹相关控件,legend 作为其标题,应位于首位且每组仅一个,缺失将影响无障碍体验。

在HTML中,fieldset 和 legend 标签常用于对表单元素进行逻辑分组,提升可读性和可访问性。这种结构不仅让页面更清晰,还对屏幕阅读器等辅助工具友好。
使用 fieldset 进行表单分组
fieldset 标签会将一组相关的表单控件和标签组合在一起,浏览器通常会在周围绘制一个边框。
常见应用场景包括:用户基本信息、联系方式、兴趣爱好等分类填写项。
基本语法如下:
立即学习“前端免费学习笔记(深入)”;
legend 标签的作用
legend 标签定义 fieldset 的标题,它会显示在边框的左上边缘位置,说明该组内容的用途。
注意点:
- 每个 fieldset 最好只包含一个 legend
- legend 应该是 fieldset 内的第一个子元素
- 缺少 legend 会影响无障碍体验
实际应用示例
以下是一个包含多个分组的注册表单片段:
基本上就这些。合理使用 fieldset 与 legend,能让表单更有结构感,也更容易被各类设备正确解析。不复杂但容易忽略。











