legend必须是fieldset的第一个子元素，这是html规范强制要求；dom顺序错乱会破坏语义链，导致屏幕阅读器忽略分组、disabled失效、css选择器失准及js操作异常。
必须用 fieldset + legend，不能靠 div 或 CSS 边框“假装”分组——否则屏幕阅读器读不出结构，键盘用户无法按组跳转，disabled 也传不下去。
为什么 legend 必须是 fieldset 的第一个子元素
这不是样式约定，是 HTML 规范强制要求。DOM 顺序错乱会直接破坏语义链：
- 辅助技术（如 NVDA、VoiceOver）只认第一个
legend，后面同级的会被忽略 -
fieldset > legend这类 CSS 选择器失效，样式无法精准控制 - 旧版 Safari 可能不渲染非首子元素的
legend，或文字重叠 - 浏览器解析时会自动把
legend提到开头，但 JS 操作 DOM 时仍按源码顺序，容易引发意外行为
正确写法：<fieldset>
<legend>收货信息</legend>
<input name="name">
</fieldset>
fieldset 的 disabled 属性到底禁用哪些控件
它能递归禁用所有**后代表单控件**，但前提是这些控件没有被非表单容器“隔断”继承链：
- ✅ 有效：直接子元素
input、select、textarea、button，以及嵌套在label或另一个fieldset里的控件 - ❌ 失效：控件被包在
div、section、p等中间层里，比如<fieldset disabled><div><input></div></fieldset>—— 此时input仍可聚焦、提交、触发事件 - ⚠️ 注意：
disabled不影响legend自身的点击行为（iOS Safari 默认不响应），如需交互，得手动加cursor: pointer和user-select: none
视觉上不想显示边框，还能用 fieldset 吗
完全可以。边框只是默认样式，语义和功能不受影响：
- 用 CSS 清除边框：
fieldset { border: none; }，再配合background或outline做视觉区分 - 别用
display: none或visibility: hidden隐藏整个fieldset—— 这会让屏幕阅读器彻底跳过，disabled也失效 - 如需收起/展开，用
inert属性 +aria-expanded控制可访问性状态，再配max-height+overflow: hidden做过渡动画 - 视觉隐藏
legend时，必须用语义安全的方式：position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;，绝不能用display: none
真正容易被忽略的是动态操作场景：JS 用 innerHTML 覆盖 fieldset 内容时，如果没重建 legend，分组就彻底消失了——开发工具里看不出异常，但表单提交、无障碍导航、禁用逻辑全崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
