用 <fieldset></fieldset> 包裹表单控件实现语义化分组
HTML 里没有叫“分组框”的独立标签，真正起作用的是 <fieldset></fieldset>。它不是视觉装饰，而是语义容器，专为逻辑相关的表单元素设计，比如一组单选按钮、多个输入项组成的地址区域等。
常见错误是把它当 <div> 用——加个边框就完事，结果屏幕阅读器无法识别结构，键盘导航也断开。正确做法是必须配 <code><legend></legend> 作为标题，且 <legend></legend> 必须是 <fieldset></fieldset> 的第一个子元素。
-
<legend></legend>不可省略，否则语义失效，部分浏览器会忽略整个<fieldset></fieldset> - 视觉上默认带边框和标题嵌入效果，CSS 可覆盖，但别用
display: none隐藏<legend></legend>，改用visually-hidden类 - 禁用整个分组：给
<fieldset></fieldset>加disabled属性，内部所有表单控件自动失能（包括<button></button>），比手动遍历更可靠
<fieldset></fieldset> 和 <div> 的关键区别在哪
<p>表面看都是容器，但行为完全不同：<code><fieldset></fieldset> 有原生表单语义与交互逻辑，<div> 没有。例如，提交表单时，<code><fieldset disabled></fieldset> 内的值根本不会被序列化发送；而 <div disabled> 完全无效（HTML 不认这个属性）。
<p>使用场景很明确：只在需要「逻辑分组 + 表单控制联动」时用 <code><fieldset></fieldset>。比如性别选择、付款方式切换、多步骤表单的每一步。
立即学习“前端免费学习笔记（深入）”；
- 性能无差异，但语义错误会影响可访问性测试（如 axe、Lighthouse 报
fieldset-missing-legend） - 兼容性极好，IE6 都支持，无需 polyfill
- 不要用它包裹非表单内容（如纯文字说明、图片），那该用
<section></section>或<aside></aside>
为什么 <legend></legend> 必须放在最前面且不能用 CSS 移动位置
因为辅助技术（尤其是屏幕阅读器）依赖 DOM 顺序读取 <legend></legend> 作为整组的描述。如果用 flex 或 grid 把它挪到右边或底部，视觉上好看，但语义顺序错乱——用户先听到控件再听到标题，完全不知所云。
真实错误现象：NVDA 或 VoiceOver 朗读时跳过 <legend></legend>，或把标题当成普通文本读两次。
- 若需视觉右对齐，用
text-align: right或margin-left: auto，别动order或position - 绝对定位
<legend></legend>会导致它脱离流，部分读屏器直接忽略 - 想隐藏但保留语义？用标准的
sr-onlyclass：position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
遇到 Fieldset is missing a legend element 错误怎么办
这是 Lighthouse 或 axe 扫描报的典型问题，根源只有一个：<fieldset></fieldset> 下没找到 <legend></legend> 子元素，或者 <legend></legend> 被包在了其他标签里（如 <span><legend>...</legend></span>）。
修复很简单，但容易漏掉嵌套场景：比如动态渲染的表单，JS 插入 <fieldset></fieldset> 后忘了同步加 <legend></legend>；或者用了 Web Component 封装，影子 DOM 里没透出 <legend></legend>。
- 检查 DOM 结构是否为：
<fieldset> <legend>标题</legend>...</fieldset>，中间不能有其他父容器 - 服务端渲染或 SSR 框架中，确保
<legend></legend>是直接子节点，避免模板引擎意外包裹 - React/Vue 中，别写成
<fieldset>{hasLegend && <legend>...</legend>}...</fieldset>，条件渲染可能造成空<fieldset></fieldset>，应保证始终存在<legend></legend>
