fieldset 和 legend 是语义化分组机制，legend 必须为 fieldset 的首个子元素以确保可访问性；fieldset[disabled] 递归禁用直属控件并排除提交；CSS 重置后需手动补视觉线索。
fieldset 和 legend 不是“加个边框+标题”的视觉技巧，而是浏览器原生支持的语义分组机制——用错位置、漏掉 legend 或嵌套干扰，可访问性就直接失效。
必须把 legend 放在 fieldset 的第一个子元素位置
屏幕阅读器（如 NVDA、VoiceOver）靠 DOM 顺序把 legend 文本绑定为整组控件的可访问名称。位置错，等于没写。
-
<fieldset><div><legend>地址</legend></div><input name="city"></fieldset>→legend被包裹，读屏器跳过，只报“编辑框” -
<fieldset><input name="zip"><legend>地址</legend></fieldset>→ 不是首子节点，旧版 Safari 可能完全不播报 - React 中用
Fragment或自定义 wrapper 包legend，也会破坏直接父子关系，语义丢失 - 正确写法就是：
<legend>配送时间偏好</legend>——纯文本，无内嵌标签，无空格占位符
fieldset[disabled] 真实禁用所有直属子控件，但有边界
加 disabled 属性不是“加个灰样式”，而是递归禁用所有直属子级表单控件（input、select、textarea、button），并自动排除在 FormData 提交之外。
- 被禁用的
input值默认不提交，哪怕你 JS 改了value - 它不影响嵌套在
div或p里的控件——这是特性，不是 bug；若需深层禁用，得靠 JS 或额外逻辑 - IE 11 及更早版本对
disabled下的button兼容性差，建议加style="pointer-events: none;"保底 - 不要试图在
legend上设disabled——它本身不可交互，加了也无效果
CSS 重置后必须手动补上视觉分组线索
删掉默认边框和内边距后，用户完全看不出哪块是一组。视觉分组提示必须由你主动补上。
立即学习“前端免费学习笔记（深入）”；
- 清掉
border后，至少保留outline: 2px solid #999或box-shadow: inset 0 0 0 1px #ccc，否则键盘导航时焦点框无处附着 -
legend默认有margin-bottom，全清掉会让标题紧贴控件顶部；建议只设legend { margin: 0.5em auto 0.75em; } - 在
display: flex容器里放fieldset，legend容易偏移或被裁剪；不要对legend设display: flex，改用display: inline-flex+align-items: center - UI 框架（如 Bootstrap、Ant Design）可能悄悄剥离
fieldset和legend；务必打开开发者工具，确认它们真实存在于最终渲染的 HTML 中
别用 div + ARIA 替代，语义和行为都不可替代
有人试图用 <div aria-labelledby="group-label"> 替代 <fieldset>，这是错的：
-
aria-labelledby只影响可访问性名称，不改变 DOM 结构或表单行为 - 它不会继承
disabled状态，内部input依然可聚焦、可提交 - JavaScript 获取
form.elements时，fieldset分组下的字段仍属于表单，但用div+ ARIA 就完全丢失语义关联 - 移动端键盘弹出逻辑、自动填充（
autofill）提示也依赖原生fieldset/legend
最常被忽略的一点：哪怕你用 CSS 把 fieldset 边框设为 none、背景设为透明，只要结构存在，其语义和原生行为（如禁用传播、屏幕阅读器分组播报）就依然有效。
