fieldset 和 legend 是唯一专为表单逻辑分组设计的原生语义标签，提供禁用传播、屏幕阅读器分组播报、表单 API 正确解析三大能力；div+CSS 无法替代。

fieldset 和 legend 是 HTML 中唯二专为表单逻辑分组设计的原生语义标签，不是视觉装饰工具，而是可被屏幕阅读器识别、被表单 API 解析、能触发原生禁用行为的核心结构元素。

为什么不能只用 div + CSS 模拟分组？

用 div 套样式看似能画出边框、加标题，但会丢失三类关键能力：

• fieldset[disabled] 会让所有内部表单控件（input、select、textarea）自动变为不可交互状态，而 div[disabled] 完全无效
• 屏幕阅读器读到 fieldset 时会播报“组：个人信息”，再逐个读内部控件；读 div 则只当普通容器，无上下文
• JavaScript 中通过 form.elements 或 form.querySelectorAll('input') 获取字段时，fieldset 不影响遍历逻辑，但语义缺失会让自动化测试、表单校验库难以按逻辑块聚合字段

legend 必须是 fieldset 的第一个子元素吗？

必须。HTML 规范强制要求 legend 是 fieldset 的首个子节点，否则语义断裂，部分辅助技术可能忽略该标题或报错。

常见错误写法：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

<fieldset>
  <div class="header"><h3>支付方式</h3></div>
  <input type="radio" name="pay" value="alipay"> 支付宝
</fieldset>

正确写法：

<fieldset>
  <legend>支付方式</legend>
  <input type="radio" name="pay" value="alipay"> 支付宝
  <input type="radio" name="pay" value="wechat"> 微信支付
</fieldset>

• 若需多级标题（如主标题+副标题），可用 span 包裹副标题，但主文本仍须在 legend 内
• 不要给 legend 设 display: block 或 float —— 它默认是块级且居中于边框顶部，强行重置会破坏可访问性定位

如何禁用整个分组？disabled 属性怎么用才生效？

直接在 fieldset 上加 disabled 属性即可，无需 JS 干预：

<fieldset disabled>
  <legend>历史订单</legend>
  <input type="text" name="order_id" value="ORD-2026-XXXX">
</fieldset>

• 该 fieldset 内所有可交互子元素（含 input、button、select、textarea）自动变为 disabled 状态
• 注意：IE 11 及更早版本对 disabled 下的 fieldset 内 button 兼容性差，建议加 style="pointer-events: none;" 保底
• 不要试图在 legend 上设 disabled —— 它本身不可交互，加了也无效果

最常被忽略的一点：哪怕你用 CSS 把 fieldset 边框设为 none、背景设为透明，只要结构存在，其语义和原生行为（如禁用传播、屏幕阅读器分组播报）就依然有效。视觉可以隐藏，但结构不能省略。