fieldset 和 legend 是唯一专为表单逻辑分组设计的原生语义标签，提供禁用传播、屏幕阅读器分组播报、表单 api 正确解析三大能力；div+css 无法替代。
fieldset 和 legend 是 HTML 中唯二专为表单逻辑分组设计的原生语义标签，不是视觉装饰工具，而是可被屏幕阅读器识别、被表单 API 解析、能触发原生禁用行为的核心结构元素。
为什么不能只用 div + CSS 模拟分组？
用 div 套样式看似能画出边框、加标题，但会丢失三类关键能力：
-
fieldset[disabled]会让所有内部表单控件（input、select、textarea）自动变为不可交互状态，而div[disabled]完全无效 - 屏幕阅读器读到
fieldset时会播报“组：个人信息”，再逐个读内部控件；读div则只当普通容器，无上下文 - JavaScript 中通过
form.elements或form.querySelectorAll('input')获取字段时，fieldset不影响遍历逻辑，但语义缺失会让自动化测试、表单校验库难以按逻辑块聚合字段
legend 必须是 fieldset 的第一个子元素吗？
必须。HTML 规范强制要求 legend 是 fieldset 的首个子节点，否则语义断裂，部分辅助技术可能忽略该标题或报错。
常见错误写法：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确写法：
- 若需多级标题（如主标题+副标题），可用
span包裹副标题，但主文本仍须在legend内 - 不要给
legend设display: block或float—— 它默认是块级且居中于边框顶部，强行重置会破坏可访问性定位
如何禁用整个分组？disabled 属性怎么用才生效？
直接在 fieldset 上加 disabled 属性即可，无需 JS 干预：
- 该
fieldset内所有可交互子元素（含input、button、select、textarea）自动变为disabled状态 - 注意：IE 11 及更早版本对
disabled下的fieldset内button兼容性差，建议加style="pointer-events: none;"保底 - 不要试图在
legend上设disabled—— 它本身不可交互，加了也无效果
最常被忽略的一点：哪怕你用 CSS 把 fieldset 边框设为 none、背景设为透明，只要结构存在，其语义和原生行为（如禁用传播、屏幕阅读器分组播报）就依然有效。视觉可以隐藏，但结构不能省略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
