fieldset 的核心作用是语义化分组而非美化，必须搭配 legend（作为首个子元素）实现无障碍支持；disabled 属性可原生禁用整组控件，CSS 模拟无效且破坏可访问性。
fieldset 标签的核心作用不是“美化”，而是语义化分组
它不解决样式问题，但能告诉浏览器和辅助技术：“这一堆控件属于同一逻辑组”。屏幕阅读器会把 legend 读作该组的标题，键盘导航时也能按组跳转。忽略它，表单对残障用户就可能变成一堆无关联的孤立项。
常见错误是只用 div + CSS 模拟边框加标题，结果语义丢失、无障碍支持归零。别图省事——fieldset 是唯一原生支持表单逻辑分组的 HTML 元素。
legend 必须是 fieldset 的第一个子元素，且不能省略
如果漏写 legend，fieldset 仍会渲染边框，但语义断裂：没有组名，辅助技术无法识别这组控件的用途。浏览器也不会报错，所以容易被忽视。
使用要点：
-
legend必须直接放在fieldset开始标签后，中间不能插空格、注释或文本节点 - 不要用 CSS 隐藏
legend（比如display: none），否则语义失效；如需视觉隐藏，用clip-path: inset(100%)或position: absolute; clip: rect(1px, 1px, 1px, 1px) - 一个
fieldset只能有一个legend；多个标题需求应拆成多个fieldset
禁用整个字段组：用 disabled 属性，而非 CSS 灰色遮罩
给 fieldset 设置 disabled 属性，会自动禁用其内部所有可交互子元素（input、select、button 等），且无需额外 JS 绑定。这是原生行为，可靠、轻量、无障碍友好。
对比陷阱：
- 仅用 CSS 添加
opacity: 0.6或pointer-events: none：视觉上像禁用，但键盘仍可聚焦、屏幕阅读器仍可操作，实际未禁用 - 手动遍历子元素加
disabled：冗余、易漏、维护成本高 -
fieldset[disabled]会自动让legend文字变灰，这是浏览器默认样式，无需额外控制
样式定制要注意 legend 的默认定位和兼容性
默认情况下，legend 会“破框而出”显示在 fieldset 左上角边框上，这是 UA 样式决定的，不同浏览器略有差异（比如 Chrome 和 Firefox 对 legend 的 margin 处理不同）。
调整建议：
- 重置
legend的默认偏移：用legend { margin: 0; padding: 0; }再配合position: relative或transform微调位置 - 避免用
float或display: inline-block强行拉平，容易破坏可访问性流顺序 - IE11 及更早版本不支持
fieldset上的某些 flex 布局，如需兼容，内部内容改用div+display: flex，fieldset本身保持块级流
真正难的不是怎么画个好看的边框，而是让分组在任何设备、任何辅助工具、任何输入方式下都保持逻辑一致。这点常被跳过，直到 QA 或无障碍审计阶段才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
