legend必须是fieldset的第一个子元素且不能为空，因为它是辅助技术识别表单分组的唯一语义名称；空或错位会导致屏幕阅读器播报“空白分组”，甚至跳过该组，破坏可访问性。
直接用 fieldset 包裹语义相关的表单控件，但必须配一个非空的 legend 作为第一个子元素——漏掉、放错位置或留空，就等于没写，可访问性和原生行为全失效。
为什么legend必须是fieldset的第一个子元素且不能空
legend 不是装饰，是这组控件在辅助技术里的“名字”。屏幕阅读器靠它播报“收货地址组”“支付方式组”，而不是“未命名组”或“空白分组”。
-
<legend></legend>会被读作“空白分组”，比不写更误导用户 -
<fieldset> <input><legend>地址</legend> </fieldset>—— 语义断裂，Chrome + NVDA 可能完全跳过该组 -
<legend><h3>地址</h3></legend>会干扰名称获取，部分读屏器静音h3或跳过文本 - 视觉隐藏但保留语义？用
position: absolute; clip: rect(1px, 1px, 1px, 1px);，禁用display: none或visibility: hidden
disabled 属性到底禁用了什么
fieldset[disabled] 触发的是原生表单行为：所有**直接子级**标准控件自动失效、无法聚焦、提交时值被排除。
- 生效范围：
<input>、<select></select>、<textarea></textarea>、<button></button>、<input type="radio">组（注意：是整组 radio） - 不生效范围：
<div> 里嵌套的 <code>input、contenteditable元素、自定义 Web Component（除非主动监听） - 被禁用的控件值不会出现在
FormData中；若业务强制要提交，得 JS 手动补：formData.append('email', input.value) - label 点击行为在 Chrome 和 Firefox 中不一致：Chrome 允许穿透到内部控件（即使 disabled），Firefox 拦截——必须真机测试
- 语法：
<fieldset form="myForm"> <legend>地址</legend> <input name="city"> </fieldset> <form id="myForm"></form> - 浏览器支持已稳定（Chrome/Firefox/Safari/Edge 均支持），但旧版 IE 不支持
- 注意：关联后，
fieldset内部控件的name仍需唯一，否则提交时值会覆盖 - UI 框架（如 Ant Design）常剥离
fieldset，只留视觉结构——务必检查渲染后 DOM，确认fieldset和legend真实存在
form 属性让fieldset脱离父form也能提交
当 fieldset 物理位置不在 form 标签内时，用 form="myForm" 显式关联，它所含控件仍会参与该表单提交。
最易被忽略的点：嵌套 fieldset ≥3 层时，键盘 Tab 导航极易卡住，尤其当某层 legend 缺失或被错误隐藏。别为了视觉分隔硬套多层，优先用 CSS（margin、border-bottom）做视觉区隔，语义上保持单层分组更稳妥。
