必须用 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> <input name="zip"><legend>住址</legend> </fieldset> - 正确写法：
<fieldset> <legend>住址</legend> <input name="city"> </fieldset> - 若需视觉隐藏标题，用
position: absolute; clip: rect(1px, 1px, 1px, 1px)，绝不用 <code>display: none或visibility: hidden
每组 <fieldset></fieldset> 至少要有一个可聚焦控件
只包说明文字、div 或 p，浏览器可能忽略其分组语义，甚至不渲染默认边框。它需要实际参与交互的元素来“激活”分组逻辑。
- 有效子元素包括：
input、select、textarea、button、radio/checkbox组 - 避免这样：
- 如果只是纯说明，改用
div + CSS 更稳妥 - 多组分块时，按业务意图切分，比如：
<fieldset><legend>身份证信息</legend></fieldset>、<fieldset><legend>工作单位</legend></fieldset>
disabled 状态只对直属子级生效，嵌套结构容易踩坑
<fieldset disabled></fieldset> 的禁用继承链非常脆弱——只要中间插入一层非表单容器（比如 div），就会中断传播。常见错误是为布局把 input 套进 div 再塞进 fieldset，结果禁用后那个 input 依然能聚焦、能输入、值照常提交。
- 安全写法：
- 危险写法：
<fieldset disabled> <legend>护照信息</legend> <div><input name="passport"></div> </fieldset> - 测试方法：用键盘 Tab 键逐个试，看是否还有控件能获得焦点
- 收起/展开分组时，别用
display: none——它会让整组从可访问性树中消失；应改用 <code>inert+aria-expanded配合max-height过渡
最易被忽略的一点：多个 <fieldset></fieldset> 嵌套时，外层 disabled 会穿透所有内层，但一旦某层缺失 <legend></legend>，整个继承链就断了——不是部分失效，是整段语义和行为全丢。所以检查分组，永远先看 <legend></legend> 在不在、是不是第一个、有没有内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
