fieldset 在语义化表单分组中必须使用，因其提供批量禁用、键盘导航边界及屏幕阅读器组名识别等原生能力；legend 为必选唯一首子元素，用于定义可访问名称。
fieldset 什么时候必须用
语义化表单分组场景下，fieldset 不是“可选装饰”，而是浏览器默认提供表单控件批量禁用、键盘导航逻辑、屏幕阅读器语义的基础容器。比如一组 radio 或 checkbox 必须归入同一个 fieldset，否则辅助技术无法识别它们属于同一逻辑组。
- 表单里有多个
radio选项（如“性别：男/女/其他”）→ 必须套fieldset+legend - 需要整组控件一键禁用（如“是否启用邮件通知”勾选后才激活下方输入框）→ 用
fieldset disabled比逐个设disabled更可靠 - 表单被
aria-live或屏幕阅读器读取时，缺legend会导致组名缺失，用户不知道这堆控件在干啥
legend 标签不能省，也不能写错位置
legend 是 fieldset 的唯一合法第一个子元素，且必须存在——哪怕内容为空也要写 <legend></legend>。浏览器会把它的文本作为整组的可访问名称，CSS 隐藏它不等于语义消失，但删掉就彻底没名了。
- 错误写法：
<fieldset> <div><h3>地址信息</h3></div>...</fieldset>→ 屏幕阅读器读不出组名 - 正确写法：
<fieldset> <legend>地址信息</legend>...</fieldset> - 想视觉隐藏但保留语义？用
clip-path: inset(50%);或position: absolute; clip: rect(1px, 1px, 1px, 1px);，别用display: none或visibility: hidden
disabled 属性对 fieldset 的特殊行为
fieldset disabled 会递归禁用所有内部表单控件（input、select、textarea、button），包括嵌套的 fieldset，而且比 JS 手动遍历设 disabled 更轻量、更符合表单原生逻辑。
- 注意：Chrome/Firefox 支持，但 Safari 在某些旧版本中对嵌套
fieldset的禁用传递有延迟或遗漏 - 不要指望
fieldset[disabled]能禁用contenteditable元素或自定义组件——它只作用于标准表单控件 - 样式上，
fieldset:disabled默认带灰色边框和文字，如需统一禁用态外观，建议额外加 class 控制，别只靠伪类
和 div 套表单的区别在哪
单纯视觉分组用 div 完全可以，但一旦涉及表单控制流、无障碍、或未来可能加 JS 交互（比如展开/折叠、条件显示），fieldset 就立刻显出价值。它不是“更高级的 div”，而是浏览器内置的表单语义单元。
立即学习“前端免费学习笔记（深入）”；
- JS 获取某组 radio 选中值？
document.querySelector('fieldset[name="gender"] input:checked')比靠 class 或 name 属性筛选更精准 - 提交前校验某组必填？
fieldset.checkValidity()可触发内部所有控件的原生验证（前提是它们有required） - 用
div替代fieldset后，键盘 Tab 导航仍会进入所有控件，但无法通过 Shift+Tab 跳过整组——fieldset提供天然导航边界
legend 的存在性检查，以及误以为 fieldset 只是画个框。它真正起作用的地方，往往在你没打开屏幕阅读器、没测试键盘操作、也没碰上 Safari 兼容问题的时候。 
