HTML fieldset与legend用法详解
来源：互联网 2026-07-31 15:55:03许多开发者在使用表单时，习惯用 包裹控件，却未添加 。实际上， 是 唯一合法且必须存在的第一个子元素。缺少它，屏幕阅读器将无法识别这组控件的用途，语义和可访问性都会丧失。此外，disabled 属性作用于整个字段组，不仅使控件视觉变灰，还会真正阻止所有子控件的交互。嵌套 时需谨慎，超过三层容易导致键
许多开发者在使用表单时，习惯用 包裹控件，却未添加 。实际上， 是 唯一合法且必须存在的第一个子元素。缺少它，屏幕阅读器将无法识别这组控件的用途，语义和可访问性都会丧失。此外，disabled 属性作用于整个字段组，不仅使控件视觉变灰，还会真正阻止所有子控件的交互。嵌套 时需谨慎，超过三层容易导致键盘导航失效，且部分 UI 框架可能会悄悄移除该结构——上线前务必手动检查 DOM。
长期稳定更新的攒劲资源： >>>点此立即查看<<<
fieldset 必须配 legend 才算真正生效
单独使用 不会报错，但语义和可访问性将完全丢失——屏幕阅读器无法得知这组控件的用途。浏览器仅将其视为普通容器，而 是它唯一合法且必须存在的第一个子元素。
常见错误包括：
将 置于中间或末尾
使用 display: none 隐藏 （应改用 clip-path 或 position: absolute; clip: rect(1px,1px,1px,1px)）
用 emoji 或图标代替文字，例如 ，会被朗读为“勾号 账户设置”，干扰理解
正确写法示例：
disabled 属性作用于整个 fieldset，不是视觉装饰
为 添加 disabled 属性，不仅会变灰并禁止鼠标点击，还会真实阻止所有子控件的聚焦、交互和表单提交，包括 、、