fieldset+legend是唯一原生支持语义分组、禁用传播和屏幕阅读器正确播报的方案；div+h3等替代方式无法实现禁用继承、组名播报及表单api逻辑识别。
直接用 fieldset + legend 是唯一能同时满足语义分组、禁用传播、屏幕阅读器正确播报这三项要求的原生方案；任何用 div + h3 或 ARIA 模拟的做法，都会在可访问性或表单行为上掉链子。
为什么不能用 div + h3 替代 fieldset + legend
视觉上确实能凑出类似效果，但底层能力完全缺失：
-
div[disabled]无效——内部input依然可聚焦、可输入、可提交 - 屏幕阅读器读到
div不会播报“组：联系信息”，只会平铺读出每个label和input，用户失去上下文 - JavaScript 中
form.elements仍能拿到字段，但逻辑分组信息丢失，校验库、自动化测试无法按“块”识别 - 移动端自动填充（autofill）提示依赖原生
fieldset结构，div分组大概率不触发
legend 必须是 fieldset 的第一个子元素
这不是建议，是 HTML 规范强制要求。一旦错位，语义就断裂：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 错误写法：
<fieldset> <div class="header"><h3>支付方式</h3></div> <input type="radio" name="pay"> </fieldset>——legend缺失，屏幕阅读器忽略分组意图 - 错误写法：
<fieldset> <input><legend>地址</legend> </fieldset>——legend不是首个子节点，部分辅助技术不识别 - 正确写法只有一种：
<fieldset> <legend>收货地址</legend> <input name="addr"><input name="city"> </fieldset> -
legend内禁止嵌套h3、div或空格占位符；纯文本最稳妥，如需图标可用span包裹 emoji，但必须确保主语义文字前置
disabled 属性怎么用才真正生效
加在 fieldset 上即可，但有几个关键细节决定它是否可靠：
- 只需
<fieldset disabled></fieldset>，所有子级input、select、textarea、button自动禁用（包括聚焦、键盘输入、表单提交） - IE11 对
button兼容性差，建议加style="pointer-events: none;"保底 - 不要给
legend加disabled——它本身不可交互，加了无意义 - 被禁用的字段即使有
name，也不会出现在form.submit()或FormData中，这是原生行为，不是 bug
嵌套 fieldset 容易让键盘导航卡死
语法允许嵌套，但实际体验风险极高：
- ≥3 层嵌套时，Tab 键极易卡在某一层内出不来，尤其当某层
legend缺失、为空或被 CSS 隐藏 - React/Vue 等框架中，若用 Fragment 或自定义 wrapper 组件包裹
legend，会导致它不再是fieldset的**直接子节点**，DOM 结构断裂 - UI 框架（如 Ant Design、Bootstrap）常在渲染时剥离你写的
fieldset，最终 DOM 里根本不存在——必须用浏览器开发者工具实时验证真实结构 - 优先用单层
fieldset+ CSS 边距/边框做视觉分隔；真需多级逻辑，用aria-labelledby显式关联，而非依赖嵌套
最容易被忽略的一点：哪怕你把 fieldset 的边框设为 none、背景设为 transparent，只要 DOM 结构存在且 legend 正确就位，它的语义、禁用传播和可访问性能力就全部在线——样式可以抹掉，结构不能妥协。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
