fieldset 必须包含 legend 才合法且无障碍，否则屏幕阅读器忽略分组、WCAG 检测报错；legend 不可被 div 或 aria-label 替代；样式调整应采用 flex 或绝对定位；disabled 作用于 fieldset 时子控件自动禁用但 JS 需查父级；嵌套 fieldset 不推荐，宜用平级分组或语义化容器替代。
fieldset 标签必须配 legend 才合法
没有 <legend> 的 <fieldset> 在 HTML5 中属于不完整结构，部分屏幕阅读器会忽略整个分组，表单语义直接失效。浏览器虽能渲染，但 WCAG 无障碍检测会报错。
常见错误现象：fieldset 看起来有边框，但键盘 Tab 切换时焦点跳过整个区域，或语音朗读完全不提“账号信息”“收货地址”这类上下文。
-
<fieldset><legend>登录信息</legend><input name="user"></fieldset>✅ 正确 -
<fieldset><div>登录信息</div><input name="user"></fieldset>❌ 无语义，legend 不可被 div 替代 -
<fieldset aria-label="登录信息"><input name="user"></fieldset>❌aria-label对fieldset无效，仅支持legend
legend 默认位置和样式很难改，别硬调 margin/padding
<legend> 是内联替换元素（replaced inline），它的默认定位是“贴左上角并半嵌入边框”，直接用 margin 或 padding 会导致边框断裂、文字偏移不可控，尤其在 Safari 和旧版 Edge 中表现混乱。
真正可靠的居中/右对齐方案只有两种：
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex+justify-content包裹legend（需额外div） - 用
position: absolute配合fieldset的position: relative—— 这是最稳定、兼容性最好的方式
示例（绝对定位右对齐）：
<fieldset style="position: relative;"> <legend style="position: absolute; right: 10px; top: -0.5em;">高级选项</legend> <input type="checkbox" name="debug"> 调试模式 </fieldset>
fieldset 禁用时子控件自动灰显，但 JavaScript 检测要小心
给 fieldset 加 disabled 属性，内部所有 <input>、<select>、<button> 会自动置灰且不可交互——这是原生行为，不用 JS 就能实现整组禁用。
但注意：JS 中检查 element.disabled 时，子控件自身 disabled 属性值仍是 false，必须查父级 fieldset：
-
document.querySelector('input').disabled === false（即使它已被 fieldset 禁用） -
document.querySelector('input').closest('fieldset')?.disabled === true✅ 正确判断逻辑
若用 FormData 收集数据，被 fieldset disabled 的字段**不会被包含**，这点和单独设 input disabled 一致。
fieldset 嵌套不推荐，替代方案更清晰
虽然 HTML 允许 fieldset 套 fieldset，但实际开发中极易导致语义混乱、样式覆盖难、焦点管理异常（比如外层禁用时内层想局部启用，做不到）。
更可控的做法：
- 用多个平级
fieldset+ CSS 分组视觉样式（如相邻fieldset间加margin-top: 1rem） - 需要逻辑嵌套时，改用
<section>或带role="group"的<div>，再手动加aria-labelledby - 复杂表单建议用
<form>下多fieldset，每个对应一个业务模块（如“账单地址”“配送方式”）
嵌套的唯一合理场景：极简向导式表单中，用外层 fieldset 控制“当前步骤可见性”，内层控制“本步各字段状态”——但这种需求本身已偏向状态管理，JS 控制更灵活。
