fieldset 和 legend 是专为表单字段逻辑分组设计的语义化标签，必须成对使用且 legend 必须为 fieldset 的首个子元素；分组内须含至少一个可聚焦控件，disabled 属性可原生禁用整组，样式重置时需保留视觉分组线索。
fieldset 和 legend 是专为表单字段逻辑分组设计的语义化标签，不是单纯画框或加标题的视觉工具——它们直接影响可访问性、表单行为和浏览器原生能力。
必须成对出现且顺序固定
legend 必须是 fieldset 的第一个子元素，中间不能插入空格、注释、div 或其他标签。否则屏幕阅读器无法将其识别为该组的标题，整组可能被跳过。
- ✅ 正确：
<fieldset> <legend>收货地址</legend> <input name="addr"> </fieldset> - ❌ 错误：
<fieldset> <input name="addr"><legend>收货地址</legend> </fieldset>（legend 不是首子节点） - ❌ 错误：
<fieldset> <div><legend>收货地址</legend></div> <input name="addr"> </fieldset>（legend 被包裹，语义断裂）
分组必须包含可聚焦控件
仅放说明文字或 <p></p> 不足以激活 fieldset 的语义功能。浏览器和读屏器需要至少一个可交互、可聚焦的表单控件（如 input、select、textarea、button）来确认这是一组“真正参与表单流程”的内容。
- 有效组合：radio 组、checkbox 组、文本输入 + 下拉选择
- 无效组合：
<fieldset> <legend>提示</legend> <p>请如实填写</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a> <p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </fieldset>→ 建议改用 div - 注意：
<input type="hidden">不算可聚焦控件，不能支撑 fieldset 语义
禁用整组只需一个属性
给 fieldset 添加 disabled 属性，会自动禁用所有直接子级的可交互控件（input、select、button 等），且这些控件的值不会出现在 FormData 中——这是原生行为，比手动遍历加 disabled 更可靠、更符合表单逻辑。
- ✅ 推荐：
<fieldset disabled> <legend>发票信息</legend> <input name="title"> </fieldset> - ❌ 避免：
<fieldset> <legend>发票信息</legend> <input disabled name="title"> </fieldset>（需逐个控制，易遗漏）
样式重置时保留语义线索
删掉默认边框后，必须用其他视觉方式表明分组关系，否则用户（尤其视障者依赖的辅助技术）会失去结构感知。
- 别只写
fieldset { border: none; }，至少补上outline或box-shadow - legend 默认有 margin 和 padding，清掉后要手动留出呼吸空间，避免标题紧贴控件顶部
- 避免对 legend 使用
position: absolute—— 旧版 Safari 渲染不稳定，推荐用 flex 或 grid 微调位置
