必须使用 fieldset + legend 实现表单分组，因其是唯一原生支持语义化、可访问性及批量禁用的方案；div 包裹仅改变样式，无法满足表单提交、键盘导航和读屏播报要求。
用 fieldset + legend 是唯一符合语义、可访问、且原生支持批量禁用的统一分组方法。 其他方案（比如 div 包裹 + CSS 边框）只改视觉，不改行为，表单提交、键盘导航、读屏播报全会出问题。
为什么必须用 fieldset 而不是 div
浏览器和读屏软件只通过 DOM 结构识别逻辑分组：div 再加 class 也只是一个容器，form.elements 拿不到“这组是支付方式”，FormData 也不会按组归类 radio/checkbox 值。fieldset 是 HTML 唯一能触发以下行为的原生标签：
-
legend文本自动成为整组控件的可访问名称（被 VoiceOver/NVDA 朗读） -
Tab键在组间跳跃时，焦点自动停在组内第一个可聚焦控件上 -
fieldset[disabled]递归禁用所有直接子级表单控件，并从FormData中排除其值 - 服务端收到同名
radio时，能正确解析为单选逻辑（否则可能只取最后一个）
legend 必须是 fieldset 的第一个子元素且不能空
这不是样式建议，而是语义硬性要求。一旦写错，分组即失效：
- 错误写法：
<fieldset><input><legend>地址</legend></fieldset>—— Chrome 和 Safari 可能完全忽略该组 - 错误写法：
<legend><h3>地址</h3></legend>——h3会被跳过，读屏器报“空白分组” - 错误写法：
<legend> </legend>或<legend></legend>—— WCAG 会报 A 级错误 - 正确写法：
<fieldset><legend>收货地址</legend><input name="city"></fieldset>
若需视觉隐藏 legend（如仅用于读屏），用 position: absolute; clip: rect(1px, 1px, 1px, 1px);，禁用 display: none 或 visibility: hidden。
立即学习“前端免费学习笔记（深入）”；
fieldset[disabled] 的作用范围和常见误判
加 disabled 属性确实能一键禁用整组，但它的生效边界非常明确：
- ✅ 生效：直接子级的
<input>、<select>、<textarea>、<button>、<input type="radio">组 - ❌ 不生效：
<div><input></div>这种嵌套在 div 里的控件，不会被禁用 - ❌ 不生效：自定义 Web Component（除非它主动监听
fieldset的disabled状态） - ⚠️ 注意：
label点击行为在 Chrome 和 Firefox 中不一致——Chrome 允许穿透到内部控件（即使 disabled），Firefox 会拦截，必须实机测试 - ⚠️ 注意：被禁用的控件值不会出现在
FormData中；若业务要求强制提交（如记录用户原本填了什么），需 JS 手动补全：formData.append('email', input.value)
真正容易被忽略的是：一个 fieldset 若只包 <p> 或 <div>，没有至少一个可聚焦控件（input/select/等），部分浏览器连默认边框都不渲染，语义彻底失效。别把它当 div 用，也别为凑数硬塞一个无意义的 input。
