必须配对使用 fieldset 和 legend，因为legend是唯一被规范定义的可访问名称元素，缺失则导致屏幕阅读器无法识别分组用途；fieldset[disabled]可原生递归禁用内部控件，且legend必须为第一个子元素，不可用div或h3替代。
直接用 fieldset 包裹相关控件、legend 作为第一个子元素，就能完成语义化分组——不是“可选优化”，而是表单可访问性与行为一致性的底线要求。
为什么必须配对使用 fieldset 和 legend
单独用 fieldset 不报错，但会触发可访问性警告：屏幕阅读器无法识别这组控件的用途，legend 是唯一被规范定义为该分组“可访问名称”的元素。没有它，整个分组在辅助技术中等于“无标题黑箱”。
-
legend必须是fieldset的第一个子元素，不能用div或h3替代，否则语义断裂 - 部分读屏软件（如 NVDA + Firefox）会跳过非
legend的标题标签，只读纯文本内容 - 移动端自动填充（autofill）提示依赖这个语义链；缺
legend时，浏览器可能无法正确关联“家庭地址”字段与对应输入框
fieldset[disabled] 禁用逻辑和常见误判
fieldset 的 disabled 属性会递归禁用所有内部可交互元素（input、select、button、textarea），且不依赖 JavaScript —— 这是它区别于 div 的核心能力。
- 禁用后，内部元素的
tabindex自动失效，键盘焦点无法进入，focus()调用静默失败 - 不要给
fieldset加style="pointer-events: none"模拟禁用：它不影响表单提交行为，也不阻止右键或键盘操作 - 若需局部启用某控件（如“同意条款”复选框），只能移除
fieldset[disabled]，改用 JS 控制子元素状态，无法保留原生递归禁用语义
样式调整时必须注意的渲染细节
浏览器对 legend 的默认定位（左上角“挤出”边框）容易引发视觉错位，尤其在自定义圆角或阴影时。
立即学习“前端免费学习笔记（深入）”；
- 用
legend { margin-left: 16px; }或legend { position: relative; left: 8px; }微调水平位置，避免文字被边框裁切 - 不要用
display: block或float破坏legend的内联块级行为，否则在 Safari 中可能丢失语义绑定 - 响应式场景下，
fieldset的padding建议用 rem 单位，避免小屏时文字紧贴边框导致可读性下降
最常被忽略的是：哪怕你只用 fieldset 做视觉分隔，只要没加 legend，就等于放弃了表单结构语义——这不是“锦上添花”，而是让整组字段在无障碍环境里彻底失语。
