fieldset 必须正确使用：legend 为首个子元素且非空，内含可聚焦表单控件，禁用用 disabled 属性，多组按逻辑分拆避免嵌套，ui 框架中需验证 dom 真实存在。
fieldset 不是用来“加边框”的，写错位置、漏掉 legend 或只当视觉容器用，等于没写。
legend 必须是 fieldset 的第一个子元素，且不能空
浏览器和读屏软件靠 legend 文本识别这组控件的语义名称。空 <legend></legend> 会被播报为“空白分组”，比不写更误导；把 legend 放在 input 后面，语义直接断裂。
- 正确：
<fieldset> <legend>收货地址</legend> <input name="city"> </fieldset> - 错误：
<fieldset> <input name="city"><legend>收货地址</legend> </fieldset> - 错误：
<fieldset><legend><h3>收货地址</h3></legend></fieldset>（h3会干扰可访问性名称获取） - 视觉隐藏但保留语义：用
position: absolute; clip: rect(1px, 1px, 1px, 1px);，别用display: none或visibility: hidden
fieldset 里至少得有一个可聚焦的表单控件
只包 <p></p>、<div> 或纯文本，<code>fieldset 就“失活”了：浏览器可能忽略其语义，边框不渲染，读屏器跳过整组。
- 有效子元素：
input、select、textarea、button、radio/checkbox组 - 无效示例：
<fieldset> <legend>说明</legend> <p>请填写真实信息</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </fieldset>→ 改用div+ CSS - 一组
radio（如性别选项）必须套在同一个fieldset里，否则辅助技术无法识别它们属于同一逻辑项
用 disabled 属性禁用整组，别手动画灰或加 pointer-events
fieldset 的 disabled 是原生行为：所有直接子级表单控件自动失效、无法聚焦、提交时值被排除。CSS 模拟只是障眼法，键盘仍能操作，表单仍会提交值。
- 生效范围仅限直接子级——嵌套在
<div> 里的 <code>input不受影响 - 错误做法：
<fieldset style="opacity:0.5; pointer-events:none"></fieldset>→ 完全破坏可访问性和表单逻辑 -
label在fieldset[disabled]下点击行为不一致：Chrome 允许穿透到内部控件（即使禁用），Firefox 则拦截，务必真机测试 - 被禁用的控件值不会出现在
FormData中；若业务要求提交，需 JS 手动补全 - 推荐结构：
<fieldset><legend>登录信息</legend></fieldset>+<fieldset><legend>隐私偏好</legend></fieldset> - 避免：
<fieldset><fieldset><fieldset>…</fieldset></fieldset></fieldset> - UI 框架（如 Bootstrap、Ant Design）常剥离
fieldset和legend——打开开发者工具检查最终 DOM，确认标签真实存在且未被 JS 移除 - 如果框架不支持，宁可手写原生
fieldset+legend，再用 CSS 对齐样式
多组 fieldset 按业务逻辑切分，别堆一起或过度嵌套
注册页、设置面板这类复杂表单，适合拆成多个 fieldset，每组一个明确主题。深层嵌套（≥3 层）会让键盘用户卡在 Tab 导航里出不来，尤其当某层 legend 缺失或为空时。
最常被忽略的是：很多团队写了 fieldset 却没验证它是否真在 DOM 里起作用——尤其用了 UI 框架之后，legend 可能被删了，disabled 可能没传递，焦点路径可能已错乱。
