fieldset 和 legend 不能仅用 CSS 模拟，因其提供不可替代的语义与可访问性：屏幕阅读器依赖它们识别逻辑分组与标题，纯 div 会丢失结构信息，导致键盘导航异常、ARIA 冗余及 WCAG 失败；legend 必须为 fieldset 唯一且首个子元素，否则 HTML 验证失败并引发旧浏览器与辅助技术兼容问题；disabled 属性可原生禁用整组控件，比 JS 更可靠；定制样式需重置默认边框、内边距及 legend 定位，避免使用 display: flex 破坏其机制。
为什么 fieldset 和 legend 不能只靠 CSS 模拟
因为语义和可访问性无法替代：屏幕阅读器会把 fieldset 识别为逻辑分组容器，legend 是该组的唯一标题；纯 div + CSS 即使视觉上一模一样，也会丢失表单结构信息，导致键盘导航跳过、ARIA 属性冗余甚至 WCAG 失败。
实际开发中常见错误是用 div 包裹一组 input 并加粗文字当标题——这在自动化测试或残障用户场景下直接失效。
legend 必须是 fieldset 的第一个子元素，且只能有一个
违反这条会导致 HTML 验证失败，部分旧浏览器（如 IE11）渲染异常，辅助技术可能忽略整个分组。
- ✅ 正确写法：
<fieldset> <legend>联系信息</legend> <input name="email"> <input name="phone"> </fieldset>
- ❌ 错误写法：
<legend>联系信息</legend><fieldset>...</fieldset>或<fieldset><h3>联系信息</h3>...</fieldset> - ⚠️ 注意：多个
legend不被允许，若需多级标题，应嵌套fieldset而非重复legend
禁用整组表单时，fieldset 的 disabled 属性比 JS 更可靠
给 fieldset 加 disabled，其内部所有表单控件（input、select、textarea、button）自动变为只读+不可聚焦+灰显，且无需逐个绑定事件或修改属性。
- JS 手动禁用容易漏掉动态插入的控件，或忘记恢复状态
- 原生
disabled对radio/checkbox组的选中态控制更准确（例如避免“半选”状态残留） - 注意：Chrome/Firefox 支持良好，但 Safari 对
disabled下legend文字颜色的默认样式略有差异，建议用fieldset:disabled legend显式重置
样式定制必须覆盖浏览器默认边框和内边距
各浏览器对 fieldset 的 border、padding、margin 默认值不同，尤其 legend 的定位（通常左上角偏移）会干扰布局。
- 重置关键样式：
fieldset { border: 1px solid #ddd; padding: 12px; margin: 0 0 16px; } legend { font-weight: bold; font-size: 14px; margin-left: 8px; padding: 0 4px; } - 不要用
display: flex直接作用于fieldset——它会破坏legend的相对定位机制，导致标题错位 - 若需圆角或阴影，优先加在
fieldset上，而非包裹它的div，否则语义层级断裂
