必须配legend。无legend时可访问性失效、浏览器忽略语义边界、css选择器失效、disabled状态无法传递；legend须为第一子元素，禁用依赖其存在。
用 fieldset 做表单逻辑分组时，必须配 legend 吗？
必须。没有 legend 的 fieldset 不仅可访问性失效（屏幕阅读器无法识别分组意图），Chrome 和 Firefox 也会在渲染时忽略其语义边界，导致 CSS fieldset 选择器失效或边框不显示。更关键的是，fieldset 的禁用状态（disabled）依赖 legend 存在才能正确向下传递到子控件。
实操建议：
- 每个
fieldset内部第一子元素必须是legend，哪怕只是占位文字：<legend class="sr-only">联系信息</legend> - 避免用 CSS 隐藏
legend（如display: none），改用视觉隐藏类（position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;） - 不要用
aria-label替代legend——它不能触发fieldset的原生禁用继承行为
fieldset disabled 真的能批量禁用所有子表单控件吗？
能，但有严格前提：子控件必须是 fieldset 的**直系或嵌套后代**，且不能被包裹在非表单容器（如 div、section）中“中断继承链”。常见失效场景是开发者把 input 放进 div 再放进 fieldset，此时 div 会阻断 disabled 状态传播。
实操建议：
- 禁用整组时直接给
fieldset加disabled属性，不要手动遍历子元素设disabled - 避免在
fieldset内使用div包裹控件；如需布局，用div但确保它不作为控件父级（即控件仍为fieldset后代） - 检查禁用后是否仍有控件可聚焦：用键盘 Tab 测试，若某个
input仍可获得焦点，说明它脱离了fieldset的禁用作用域
如何让 fieldset 分组响应式收起/展开而不破坏语义？
不能用 display: none 或 visibility: hidden 控制显隐——这会让屏幕阅读器完全跳过整个分组，也切断 disabled 继承。正确做法是用 inert 属性配合 ARIA 状态标记，再辅以 CSS max-height 过渡实现视觉收起。
实操建议：
- 收起时给
fieldset添加inert属性，并设置aria-expanded="false"；展开时移除inert并设aria-expanded="true" - CSS 动画用
max-height+overflow: hidden，而非height（后者无法自动适配内容高度） - 禁用状态下收起/展开要保持一致性：若
fieldset已disabled，inert可省略（disabled本身已使内容不可交互）
多个嵌套 fieldset 时，disabled 状态会穿透几层？
会穿透任意深度，只要路径上没有非表单元素打断继承。但要注意：外层 fieldset disabled 会让内层所有控件不可交互、不可聚焦、值不提交；而内层单独加 disabled 不影响外层其他分组——两者叠加时，禁用以最近的 disabled 为准，不存在“冲突”，只有“覆盖”。
实操建议：
- 嵌套层级不宜超过 2 层，否则可维护性和可访问性急剧下降；三层以上建议拆分为独立
form或用 JS 管理状态 - 调试时用浏览器开发者工具检查具体控件的
offsetParent和closest("fieldset[disabled]")，确认禁用来源是否符合预期 - 服务端接收数据时，仍需校验：前端禁用的字段可能被绕过提交，
disabled不代表服务端可忽略校验
fieldset，而是当它和 JS 状态管理、CSS Grid 布局、无障碍测试工具同时出现时，哪一层在悄悄覆盖禁用逻辑——这时候得靠 getComputedStyle 查 pointer-events，而不是只看 HTML 属性。 前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
