fieldset 和 legend 是语义化表单分组必需标签，legend 必须为 fieldset 首子元素以确保可访问性；disabled 属性递归禁用所有后代控件；每个 fieldset 仅允许一个 legend，多级分组应使用多个平行 fieldset。
fieldset 和 legend 不是装饰性标签，它们直接参与表单的语义结构和可访问性逻辑。用错或不用，屏幕阅读器可能读不出分组意图，键盘导航也会跳过逻辑区块。
为什么 legend 必须是 fieldset 的第一个子元素
这是 HTML 规范强制要求。如果把 legend 放在中间或末尾，浏览器会自动将其“提”到开头，但 DOM 顺序错乱会导致：
- 辅助技术（如 NVDA、VoiceOver）只把第一个
legend当作该fieldset的标题，后续同级legend被忽略 - CSS 选择器
fieldset > legend失效，样式无法精准控制 - 某些旧版 Safari 对非首子元素的
legend渲染异常（比如文字重叠或不显示边框）
正确写法：
<fieldset><br> <legend>收货信息</legend><br> <label>姓名：<input name="name"></label><br> <label>电话：<input name="phone"></label><br></fieldset>
fieldset 的 disabled 属性会递归禁用所有控件
给 fieldset 加 disabled，比逐个给 input、select、textarea 加更可靠——它天然递归作用于所有后代表单控件，包括 button 和自定义组件（只要它们没显式设 disabled=false）。
- 注意：被禁用的控件不会触发表单提交事件，也不会被
FormData收集 - 若只想视觉灰化但保留交互，别用
disabled，改用 CSSopacity: 0.6; pointer-events: none，并手动管理状态 - Chrome 和 Firefox 中，禁用的
fieldset仍会触发focus事件（焦点落在fieldset自身），但无法聚焦内部控件
当需要多个 legend 时，不要强行复用一个 fieldset
一个 fieldset 只应有一个 legend。若内容需多级标题（例如“支付方式”下再分“银行卡”“支付宝”），常见错误是嵌套 fieldset 或塞多个 legend：
- 嵌套
fieldset合法但语义混乱——外层legend描述整体，内层legend描述子组，屏幕阅读器会读成“支付方式 银行卡”，容易误解为“银行卡属于支付方式”而非“银行卡是支付方式的一种” - 更清晰的做法：用多个平行
fieldset，各自带独立legend，并通过aria-labelledby或aria-describedby建立上下文关联 - 如果必须视觉上合并边框，用 CSS
border: none+outline或背景色区分，别牺牲语义换样式
真正麻烦的是 JavaScript 动态插入时漏掉 legend，或者用 innerHTML 覆盖整个 fieldset 导致原有 legend 被删——这时候分组就彻底失效了，连开发工具里都看不出逻辑结构。
