HTML5 中 fieldset 必须以 legend 为首个子节点，且需包含可聚焦控件；disabled 仅禁用直接子级表单元素；多组应平级而非嵌套，避免语义断裂与兼容问题。
在 HTML5 中，用 fieldset 和 legend 对复杂表单做语义化区块划分，核心是让每组字段真正成为一个“有名字、可操作、可访问”的逻辑单元——不是加边框，而是建立浏览器和辅助技术能理解的结构关系。
必须把 legend 放在 fieldset 的第一个子位置
legend 不是装饰文字，是分组的语义必需项。它必须是 fieldset 的第一个子节点（childNode），中间不能有空格、换行、注释或任何包裹标签。
- ✅ 正确：
<fieldset><legend>收货地址</legend><input name="city"></fieldset> - ❌ 错误：
<fieldset><div><legend>收货地址</legend></div><input name="city"></fieldset>（legend被包裹，语义断裂） - ❌ 错误：
<fieldset><!-- 注释 --><legend>收货地址</legend><input name="city"></fieldset>（注释是真实节点，legend不再是首个子节点）
每组 fieldset 至少要有一个可聚焦控件
只包说明文字、<p> 或 <div> 的 fieldset 会被浏览器忽略语义，甚至不渲染默认边框。它需要实际参与交互的元素来“激活”分组。
- 有效子元素包括：
<input>、<select>、<textarea>、<button>、<input type="radio">或<input type="checkbox">组 - 避免这样写：
<fieldset><legend>提示</legend><p>请如实填写</p></fieldset>→ 建议改用<div>+ CSS
用 disabled 属性一键禁用整组，但注意作用范围
给 fieldset 加 disabled，会原生禁用所有**直接子级**表单控件，并自动排除在 FormData 提交之外——这是唯一同时满足禁用行为、视觉反馈和提交逻辑的原生方案。
- ✅ 生效：
<fieldset disabled><legend>支付方式</legend><input type="radio" name="pay"></fieldset> - ❌ 不生效：
<fieldset disabled><legend>支付方式</legend><div><input type="radio" name="pay"></div></fieldset>（<div>中断了继承链） -
<input type="hidden">永远不受影响，这是规范行为，不是 bug
多个 fieldset 平级拆分，别嵌套
注册页、多步骤设置等复杂场景，适合按用户认知切分成多个平行 fieldset，每组一个明确主题。嵌套不仅语义模糊，读屏器通常只识别直接子 fieldset 的 legend。
- 推荐结构：
<fieldset><legend>登录信息</legend></fieldset>、<fieldset><legend>隐私偏好</legend></fieldset> - 避免：
<fieldset><legend>主信息</legend><fieldset><legend>子项</legend></fieldset></fieldset> - 不要把
fieldset直接塞进<table><td>，需先用<div>包一层，否则部分浏览器解析异常
