fieldset 必须包含 legend 才合法且无障碍，否则屏幕阅读器忽略分组、wcag 检测报错；legend 不可被 div 或 aria-label 替代；样式调整应采用 flex 或绝对定位；disabled 作用于 fieldset 时子控件自动禁用但 js 需查父级；嵌套 fieldset 不推荐，宜用平级分组或语义化容器替代。
fieldset 标签必须配 legend 才合法
没有 <legend></legend> 的 <fieldset></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></legend> 是内联替换元素（replaced inline），它的默认定位是“贴左上角并半嵌入边框”，直接用 margin 或 padding 会导致边框断裂、文字偏移不可控，尤其在 Safari 和旧版 Edge 中表现混乱。
真正可靠的居中/右对齐方案只有两种：
- 用
display: flex+justify-content包裹legend（需额外div） - 用
position: absolute配合fieldset的position: relative—— 这是最稳定、兼容性最好的方式
示例（绝对定位右对齐）：
fieldset 禁用时子控件自动灰显，但 JavaScript 检测要小心
给 fieldset 加 disabled 属性，内部所有 <input>、<select></select>、<button></button> 会自动置灰且不可交互——这是原生行为，不用 JS 就能实现整组禁用。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
但注意：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></section>或带role="group"的<div>，再手动加 <code>aria-labelledby - 复杂表单建议用
<form></form>下多fieldset，每个对应一个业务模块（如“账单地址”“配送方式”）
嵌套的唯一合理场景：极简向导式表单中，用外层 fieldset 控制“当前步骤可见性”，内层控制“本步各字段状态”——但这种需求本身已偏向状态管理，JS 控制更灵活。
