fieldset和legend是唯一满足语义分组、可访问性命名与原生批量禁用的html原生机制；legend必须为fieldset首个子元素且不可包裹，否则屏幕阅读器无法绑定组名，fieldset[disabled]仅递归禁用直属子控件并排除提交。
<fieldset></fieldset> 和 <legend></legend> 不是用来“加边框+标题”的视觉技巧，而是唯一能同时满足语义分组、可访问性命名、原生批量禁用这三件事的 HTML 原生机制。漏掉 <legend></legend>，或放错位置，整组就等于没分组。
legend 必须是 fieldset 的第一个子元素，且不能被包裹
屏幕阅读器（NVDA、VoiceOver）靠 DOM 顺序把 <legend></legend> 文本绑定为整组控件的可访问名称。一旦被 <div>、<code><p></p> 或 React Fragment 包裹，或放在 <input> 后面，语义就断裂。
- 错误：
<fieldset> <div><legend>地址</legend></div> <input name="city"> </fieldset>→<legend></legend>被忽略 - 错误：
<fieldset> <input name="zip"><legend>地址</legend> </fieldset>→ 旧版 Safari 可能不播报 - 正确：
<fieldset> <legend>收货地址</legend> <input name="city"> </fieldset>—— 纯文本，无内嵌标签，无空格占位符 - 视觉隐藏可用
position: absolute; clip: rect(1px, 1px, 1px, 1px);，但绝不能用display: none或visibility: hidden
fieldset[disabled] 真实禁用直属子控件，但不穿透 div
给 <fieldset></fieldset> 加 disabled 属性，会递归禁用所有直属子级表单控件（<input>、<select></select>、<textarea></textarea>、<button></button>），并自动排除在 FormData 提交之外——这是原生能力，不是 CSS 模拟。
- 生效范围仅限直属后代：若写成
<fieldset disabled><div><input name="phone"></div></fieldset>，<input>不会被禁用（<div> 中断了继承链） <li>禁用后，<code>input无法聚焦、focus()静默失败、键盘 Tab 跳过整组 - 不要用
style="pointer-events: none"替代 —— 它不影响提交行为，也不阻止键盘操作 - IE11 对
disabled下的<button></button>兼容性差，可加style="pointer-events: none;"保底 - 读屏器通常只识别直接子
<fieldset></fieldset>的<legend></legend>，中间层可能被跳过 - Chrome 和 Safari 对嵌套焦点流处理不一致，Tab 顺序可能出错
-
fieldset.elements只返回直属子控件，不包含深层嵌套内的input - 替代方案更可靠：用
<input type="radio">控制显隐 + 平级<fieldset></fieldset>，或用aria-labelledby关联逻辑层级 - 清掉
border后，至少保留outline: 2px solid #999或box-shadow: inset 0 0 0 1px #ccc，否则键盘导航时焦点框无处附着 -
<legend></legend>默认有margin-bottom，全清掉会让标题紧贴控件顶部；建议设legend { margin: 0.5em auto 0.75em; } - 在
display: flex容器里放<fieldset></fieldset>，<legend></legend>容易偏移；不要对<legend></legend>设display: flex，改用display: inline-flex+align-items: center - UI 框架（如 Ant Design）可能悄悄剥离
<fieldset></fieldset>和<legend></legend>；务必打开开发者工具，确认它们真实存在于最终渲染的 HTML 中
多个 fieldset 拆分复杂表单，别嵌套
注册页、多步骤流程等场景，适合按用户认知切分成多个平级 <fieldset></fieldset>，每组一个明确主题。嵌套 <fieldset></fieldset> 在语义和行为上都不可靠。
样式重置后必须手动补视觉线索
删掉默认边框和内边距后，用户完全看不出哪块是一组。视觉分组提示必须由你主动补上。
<fieldset></fieldset> 做视觉分隔，只要没加 <legend></legend>，就等于放弃了整组字段的语义结构——这不是“锦上添花”，而是让它们在无障碍环境里彻底失语。
