如何使用HTML fieldset标签对复杂个人信息分组
当表单设计变得复杂，涉及身份证号码、工作单位、家庭成员等多组数据录入时，许多人会下意识地使用 div 搭配几个边框在视觉上进行“分组”。但这一做法其实是一个典型的语义陷阱——仅靠画一个外框，根本无法让浏览器和辅助技术识别出分组的含义。
你可能会问，为什么必须使用 fieldset？简单来说，它是唯一一个能够将“控件集合”打包成一个逻辑分组的原生方案。配合 legend 作为分组标题，屏幕阅读器才能准确告知用户：“下面这些输入框都属于‘紧急联系人’这一组”。
但这里有一条极易翻车的硬性规则：legend 必须是 fieldset 中的第一个子元素，且不能为空。如果在中间插入了 div、p 甚至是 React Fragment，或者将它放到了某个 input 之后，那么 NVDA、VoiceOver 等主流读屏软件将无法将其绑定为分组的可访问名称——听起来是小事，实际上语义链一旦断裂，整个分组的无障碍信息就完全失效了。
下面通过几个正反例对照说明：
- 错误写法：
- 错误写法：
- 正确写法：
- 如果出于布局考虑需要在视觉上隐藏标题，可以使用
position: absolute; clip: rect(1px, 1px, 1px, 1px)，但绝不能使用display: none或visibility: hidden——那相当于将标题从无障碍树中彻底移除。
为什么不能只用 div 加 CSS 边框模拟分组
在视觉上添加一个边框，并不代表逻辑上真正成为“一组”。div 对屏幕阅读器来说是完全透明的，它不会告知用户“这五个输入框都属于‘紧急联系人’”，也无法让键盘 Tab 导航感知到分组边界。更关键的是，div 不具备 disabled 属性——如果你需要禁用整组控件，必须手动遍历所有子元素逐个添加 disabled，只要漏掉一个，就可能导致用户提交了本应禁止提交的数据。而 能够原生递归禁用所有直属表单控件，并自动将它们排除在 FormData 提交之外，省心太多。
每组 fieldset 至少应包含一个可聚焦控件
如果 fieldset 中只放入说明文字、div 或 p，浏览器很可能忽略它的分组语义，甚至不渲染默认边框。它需要实际参与交互的元素来“激活”分组逻辑。
- 有效的子元素包括：
input、select、textarea、button、radio/checkbox组 - 应避免如下写法：
- 如果只是纯说明文字，直接使用
div+ CSS 更加稳妥 - 多组分块时，按照业务意图切分即可，例如：
与
disabled 状态仅对直属子级生效，嵌套结构容易踩坑
的禁用继承链其实有些“脆弱”——一旦中间插入一层非表单容器（比如一个 div），传播就会中断。一个常见误区是：为了布局给 input 套上一个 div 再放入 fieldset，结果禁用后那个 input 依然能够聚焦、输入，提交时照常发送数据。测试方法也很简单：用键盘 Tab 键依次尝试，看是否还有控件能获得焦点。
- 安全写法：
- 危险写法：
- 在实现分组收起/展开时，不要使用
display: none——它会导致整组从可访问性树中消失；应当应用inert+aria-expanded配合max-height过渡来完成。
最后说一个最容易被忽略的暗坑：当多个 fieldset 嵌套时，外层的 disabled 会穿透所有内层，但只要某一层缺失了 legend，整个禁用继承链就会断裂——不是部分失效，而是整段语义和禁用行为全部丢失。因此检查分组时，永远首先确认 legend 是否存在、是否是第一个子元素、是否有内容。这个顺序对了，后面的坑就能避开一大半。