如何借助HTML的fieldset标签对复杂个人信息进行分组

必须用 fieldset 包裹，且每个分组里第一个子元素必须是 legend——否则分组在语义、可访问性和禁用行为上全部失效；div 无法提供语义分组、键盘导航边界和原生 disabled 递归控制，而 fieldset 可自动绑定可访问名称、递归禁用控件并排除于 FormData 提交之外。

必须用 <fieldset></fieldset> 包裹，且每个分组里第一个子元素必须是 <legend></legend>——否则分组在语义、可访问性和禁用行为上全部失效。

为什么不能只用 div 加 CSS 边框来模拟分组

视觉上加个框不等于逻辑上成一组。div 对屏幕阅读器完全透明：它不会告诉用户“接下来这五个输入框都属于‘紧急联系人’”，也不会让键盘 Tab 导航感知到分组边界。更关键的是，div 没有 disabled 属性，你得手动遍历所有子控件加 disabled，漏一个就导致表单逻辑错乱。而 <fieldset disabled></fieldset> 会原生递归禁用所有直属表单控件，并自动排除在 FormData 提交之外。

<legend></legend> 必须是第一个子元素，且不能为空

这不是样式建议，而是无障碍树构建的硬性规则。一旦 <legend></legend> 被 div、p 或 React Fragment 包裹，或出现在 input 后面，NVDA、VoiceOver 就无法把它绑定为该组的可访问名称。

• 错误写法：

  <fieldset><div><legend>住址</legend></div><input name="city"></fieldset></li><li>错误写法：<code><fieldset><input name="zip"><legend>住址</legend></fieldset></li><li>正确写法：<code><fieldset><legend>住址</legend><input name="city"></fieldset></li><li>若需视觉隐藏标题，用 <code>position: absolute; clip: rect(1px, 1px, 1px, 1px)

  ，绝不用 display: none 或 visibility: hidden

每组 <fieldset></fieldset> 至少要有一个可聚焦控件

只包说明文字、div 或 p，浏览器可能忽略其分组语义，甚至不渲染默认边框。它需要实际参与交互的元素来“激活”分组逻辑。

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

• 有效子元素包括：input、select、textarea、button、radio/checkbox 组
• 避免这样：

  <fieldset><legend>提示</legend><p>请填写真实信息</p></fieldset></li><li>如果只是纯说明，改用 <code>div

  + CSS 更稳妥
• 多组分块时，按业务意图切分，比如：<fieldset><legend>身份证信息</legend></fieldset>、<fieldset><legend>工作单位</legend></fieldset>

disabled 状态只对直属子级生效，嵌套结构容易踩坑

<fieldset disabled></fieldset> 的禁用继承链非常脆弱——只要中间插入一层非表单容器（比如 div），就会中断传播。常见错误是为布局把 input 套进 div 再塞进 fieldset，结果禁用后那个 input 依然能聚焦、能输入、值照常提交。

• 安全写法：

  <fieldset disabled><legend>护照信息</legend><input name="passport"><input name="expiry"></fieldset></li><li>危险写法：<code><fieldset disabled><legend>护照信息</legend><div><input name="passport"></div></fieldset></li><li>测试方法：用键盘 Tab 键逐个试，看是否还有控件能获得焦点</li><li>收起/展开分组时，别用 <code>display: none

  ——它会让整组从可访问性树中消失；应改用 inert + aria-expanded 配合 max-height 过渡

最易被忽略的一点：多个 <fieldset></fieldset> 嵌套时，外层 disabled 会穿透所有内层，但一旦某层缺失 <legend></legend>，整个继承链就断了——不是部分失效，是整段语义和行为全丢。所以检查分组，永远先看 <legend></legend> 在不在、是不是第一个、有没有内容。