legend元素必须作为fieldset的直接子元素且为第一个子元素才有效，单独使用无效；它专用于语义化表单控件分组，影响无障碍访问、键盘导航及浏览器渲染行为。

legend 元素必须嵌套在 fieldset 里才有效

单独写

用户名

不会显示，浏览器直接忽略。它不是独立表单控件，而是

的专属标题标签，语义上表示“这一组控件的说明”。

• 必须作为
  的第一个子元素，否则部分浏览器（如旧版 IE）可能渲染异常
• 如果只是想加个标题又不想用
  ，该用
  或带 aria-labelledby 的
  ，别硬套
• 默认带边框，若需隐藏，CSS 中设 border: none 即可，不影响
  定位

legend 位置偏移常见于 CSS 重置或 flex 布局干扰

很多项目全局重置了 fieldset 的 margin/padding，或把 fieldset 放进 display: flex 容器里，结果

跑到左上角、叠在边框上，甚至被裁剪。

• Chrome 和 Firefox 对
  的定位逻辑不同：它默认是 position: relative，但“相对”的基准是
  的上边框内侧，不是 content box
• 避免给
  设 display: flex；真要布局对齐，用
  外层包一层
  再 flex
• 微调位置时优先用 margin-left 或 transform: translateX()，别碰 top/left —— 容易触发怪异定位行为

无障碍支持依赖 legend + fieldset 的组合结构

屏幕阅读器（如 NVDA、VoiceOver）只有在

和

配合使用时，才会把整组控件读作“用户名组：邮箱、密码”，否则每个输入框孤立播报，用户无法理解上下文。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载
• 不要用
  包文字再加图标，例如
  ✅ 登录信息
  —— emoji 可能被朗读为“勾号 登录信息”，干扰理解
• 若一组控件含多个 且共用一个语义目的（如“收货地址”），就必须用
  ，不能只靠
  视觉模拟
• 禁用整个
  （disabled 属性）会自动禁用内部所有表单控件，这是
  无法替代的底层能力

React 中动态渲染 legend 要注意 fragment 陷阱

用 React 写

{title}
{children}
没问题，但若拆成两个组件（比如 和 ），就容易误用 导致 DOM 结构断裂。
• 必须是
  的直接子节点，中间不能插入任何 wrapper 元素或 Fragment
• 错误示例：
  xxx

  >
  → 渲染后
  脱离父级，失效
• 正确做法：把
  和内容一起交给同一个组件返回，或用 props 透传 legend 内容，由
  组件统一组织结构

最常被忽略的是：legend 不是装饰性标签，它的存在与否直接影响表单语义、键盘导航顺序和辅助技术行为。哪怕视觉上不想要边框，也别删掉 fieldset —— 那等于主动放弃结构化表达。