中的fieldset和legend如何用？

fieldset必须配legend才生效，legend是其唯一合法且必需的第一个子元素；disabled作用于整个字段组并阻止所有交互；嵌套需谨慎，框架可能剥离该结构。

fieldset 必须配 legend 才算真正生效

单独写 <fieldset></fieldset> 不会报错，但语义和可访问性全丢——屏幕阅读器根本不知道这组控件是干啥的。浏览器只把它当普通容器，<legend> 是它唯一合法且必须存在的第一个子元素。

常见错误包括：
• 把 <legend> 写在中间或末尾
• 用 display: none 隐藏 <legend>（应改用 clip-path 或 position: absolute; clip: rect(1px,1px,1px,1px)）
• 用 emoji 或图标代替文字，比如 <legend>✅ 账户设置</legend>，会被朗读为“勾号 账户设置”，干扰理解

正确写法示例：

<fieldset><br>  <legend>收货地址</legend><br>  <label>姓名:<input name="name"></label><br>  <label>电话:<input name="tel"></label><br></fieldset>

disabled 属性作用于整个 fieldset，不是视觉装饰

给 <fieldset disabled> 加 disabled，不只是变灰、禁鼠标点击——它真实地阻止所有子控件的聚焦、交互和表单提交，包括 <input>、<select>、<textarea>，甚至嵌套的 <button>（除非你手动覆盖 pointer-events）。

立即学习“前端免费学习笔记（深入）”；

注意点：
• 被禁用的 <input> 默认不参与提交，哪怕有 name 属性
• 如果只想禁用部分控件，别用 fieldset[disabled]，直接给对应控件加 disabled
• Chrome 和 Firefox 对 <label> 点击穿透行为有差异，务必真机测试
• React 中若拆成多个组件返回，容易因 Fragment 或 wrapper 元素导致 <legend> 不再是 <fieldset> 的直接子节点，DOM 结构就断了

嵌套 fieldset 容易搞崩键盘导航

嵌套本身合法，但 ≥3 层时极易出问题：Tab 键可能卡在内层出不来，尤其当某层 <legend> 缺失、为空或被隐藏时，焦点管理逻辑会失效。

实用建议：
• 优先用单层 <fieldset> 分组，靠 CSS（如 margin、border）做视觉分隔
• 若必须嵌套，确保每层都有语义清晰的 <legend>，且不往里面塞 <button> 等交互元素
• 用 document.activeElement + console.log 实时观察焦点路径，比依赖浏览器默认行为更可靠

UI 框架常悄悄移除 fieldset，得手动验证 DOM

Bootstrap、Ant Design 这类框架喜欢用 CSS Grid/Flex 模拟分组，它们的表单组件往往会在渲染时剥离或忽略你写的 <fieldset> 和 <legend>。结果就是：你写了，但 DOM 里没有；语义丢了，可访问性也断了。

上线前必须检查：
• 打开浏览器开发者工具，确认 <fieldset> 和 <legend> 真实存在于最终渲染的 HTML 中
• 不要只看源码或 JSX，要看 Elements 面板里的实际结构
• 如果框架不支持，宁可用 aria-labelledby + <div> 模拟，也别假装用了 <fieldset>