fieldset 表单分组的核心是确立语义关系，legend 必须为 fieldset 的首个子元素且纯文本，每组至少含一个可聚焦控件，disabled 仅作用于直接子级，多组应平级拆分、避免嵌套。

和

构建表单分组，核心不是加边框或排版，而是确立语义关系。结构写错，屏幕阅读器读不出组名，键盘导航断层，禁用逻辑失效——等于没分组。

legend 必须是 fieldset 的第一个子元素
这是 HTML 规范强制要求，不是建议。DOM 顺序决定语义绑定：

• 屏幕阅读器（NVDA、VoiceOver）靠这个顺序把 legend 文本作为整组控件的可访问名称播报
• 收货地址
  → 语义断裂，旧版 Safari 可能完全忽略
• 支付方式
  → legend 被包裹，读屏器跳过，只报“单选按钮”
• 正确写法：
  收货地址
  ，纯文本，无空格、无注释、无嵌套标签（如 h3、span、div）

每组 fieldset 至少包含一个可聚焦的表单控件
fieldset 需要“被激活”才有完整语义。只包提示文字、

或

，浏览器可能忽略其分组作用，甚至不渲染默认边框：

• 有效子元素包括：input、select、textarea、button、radio/checkbox 组
• 错误示例：
  说明

  请填写真实信息

  

  百度AI开放平台

  百度AI开放平台是一款提供语音、图像、自然语言处理和行业 AI 能力的技术开放平台。

  下载
  → 建议改用
  + CSS
• 若仅需视觉提示，不用 fieldset；若需语义分组，必须有交互控件

disabled 属性只作用于 fieldset 的直接子级表单控件

是原生批量禁用机制，不是视觉模拟： - 自动禁用所有直属子级的 input、select、textarea、button、radio/checkbox 组 - 被禁用的控件无法聚焦、键盘 Tab 跳过、值不会出现在 FormData 或 form.submit() 中 - 不穿透嵌套层级：如

，该 input 不受影响 - 别用 style="pointer-events: none" 或 opacity: 0.5 替代——它不阻止键盘操作，也不影响提交逻辑

多个 fieldset 应平级拆分，避免嵌套
复杂表单按用户认知逻辑切分成多个独立 fieldset，每组一个明确主题：

• 适合场景：注册页（登录信息、隐私偏好）、多步骤流程、设置面板
• 每个 fieldset 对应一个业务模块，方便键盘用户按组跳转
• 嵌套 ≥3 层易破坏 Tab 导航流，尤其当内层 legend 缺失或被隐藏时，焦点可能卡住
• 不要把 fieldset 直接塞进 table 的 里，需先用
  包一层，否则部分浏览器解析异常

  不复杂但容易忽略