必须为<fieldset>添加<legend>以确保语义完整和屏幕阅读器识别，且<legend>须为首个子元素；disabled属性可批量禁用内部控件但会阻止值提交；样式定制需谨慎避免破坏边框与定位。
用 <fieldset> 包裹表单控件，别漏掉 <legend>
没有 <legend> 的 <fieldset> 不仅语义残缺，还会让屏幕阅读器无法识别分组意图。浏览器默认会给 <legend> 渲染在边框左上角，视觉和可访问性都依赖它。
常见错误是只写 <fieldset>，或者把标题用 <h3> 或 <p> 替代 <legend> —— 这样分组就失效了。
-
<fieldset>必须直接包裹<input>、<select>、<textarea>等表单控件，不能套一层<div> -
<legend>必须是<fieldset>的第一个子元素 - 如果想隐藏
<legend>但保留可访问性，用 CSS 隐藏（如position: absolute; left: -9999px;），别用display: none或aria-hidden="true"
<fieldset> 的 disabled 属性会批量禁用内部所有控件
这是它最实用的特性之一：给 <fieldset> 加 disabled，里面所有 <input>、<button>、<select> 会自动变灰且不可交互，不用逐个加 disabled。
注意：这个行为是原生支持的，不需要 JS；但一旦加了 disabled，里面的控件值就不会随表单提交——这点常被忽略。
立即学习“前端免费学习笔记（深入）”；
- 只禁用部分控件？那就别用
<fieldset disabled>，改用 JavaScript 控制单个控件 -
<legend>在disabled状态下也会变灰，但仍是可聚焦的（部分浏览器），若需完全禁用焦点，得额外加tabindex="-1" - 不要对整个
<fieldset>做 CSS 动画或 transform，某些旧版 Safari 会破坏边框渲染
样式定制时，<legend> 的定位容易错位
浏览器对 <legend> 的默认定位（左上角嵌入边框）是硬编码逻辑，CSS 的 margin、padding、transform 都可能让它“飘”出边框，尤其在 Flex/Grid 布局里。
最稳妥的修复方式是重置 <legend> 的定位模型，而不是强行用 top/left 调整。
- 推荐做法：给
<legend>设position: relative;，再用transform: translateX(-50%);居中（配合left: 50%），避免影响边框绘制 - 别用
float或display: inline-block改变<legend>的流式行为，IE 和旧 Edge 会崩溃 - 如果要圆角边框，
<fieldset>的border-radius不会影响<legend>的位置，但部分 Chrome 版本会裁掉<legend>的尖角，加overflow: visible可修复
替代方案：什么情况下不该用 <fieldset>
不是所有视觉分组都需要 <fieldset>。它本质是语义化「逻辑相关的一组表单控件」，比如「送货地址」「账单地址」这种可独立验证、可整体启用/禁用的单元。
纯视觉分隔（比如用虚线框把几个不相关的输入框围起来）、或者内容含非表单元素（如说明文字、图标、按钮组），更适合用 <div> + ARIA role="group" + aria-labelledby。
-
<fieldset>不能嵌套（HTML 规范禁止），多层分组必须用多个并列<fieldset> - 如果表单里只有单个控件（比如一个搜索框），加
<fieldset>是冗余的，反而增加 DOM 深度 - 服务端渲染模板中动态生成
<fieldset>时，注意空<legend>会导致无障碍问题，宁可留空字符串也不留空标签
<fieldset> 才不会变成摆设。 
