使用 fieldset 和 legend 可对表单字段逻辑分组,提升可读性与可访问性;fieldset 包裹相关控件,legend 作为标题置于其内首位置,助力屏幕阅读器识别,优化用户体验。

在HTML中,使用 fieldset 和 legend 标签可以将表单中的相关字段进行逻辑分组,提升可读性和可访问性。这对复杂表单尤其有用,比如注册页面或设置界面。
fieldset:定义表单字段分组
fieldset 标签用于将一组相关的表单控件和标签组织在一起。浏览器通常会用一个边框将其包围,形成视觉上的区块。
常见用法:- 包裹多个 input、label、select 等元素
- 支持 disabled 属性,可一次性禁用组内所有控件
legend:为字段集添加标题
legend 标签必须放在 fieldset 内部的第一个位置,用于定义该组的标题或说明。屏幕阅读器会读取 legend 内容,帮助视障用户理解每组的作用。
使用要点:- 每个 fieldset 最好只包含一个 legend
- 文字应简洁明确,如“联系信息”、“账户设置”等
实际代码示例
下面是一个用户注册表单中使用 fieldset 和 legend 进行分组的实例:
立即学习“前端免费学习笔记(深入)”;
这个结构让表单更有条理,用户能快速识别不同部分的内容。
基本上就这些。合理使用 fieldset 和 legend 能显著提升表单的语义化和用户体验,特别是对辅助技术更友好。不复杂但容易忽略。










