fieldset 必须配对非空且位置正确的 legend 才生效，legend 必须是第一个子元素且不可为空或错位，否则可访问性、键盘导航和 disabled 行为全部失效。
fieldset 不是加边框的视觉容器，它只有配对非空且位置正确的 legend 时，才真正生效——漏掉、错位或留空，可访问性、键盘导航、disabled 行为全失效。
legend 必须是 fieldset 的第一个子元素且不能空
浏览器和读屏器（如 NVDA、VoiceOver）只认 fieldset 开头紧跟着 legend 这一种结构。中间插个空格、换行、注释，甚至一个 <p></p>，语义链就断了，整组可能被跳过。
-
<fieldset> <legend>收货地址</legend> <input name="city"> </fieldset>✅ 正确 -
<fieldset> <input name="city"><legend>收货地址</legend> </fieldset>❌ 语义断裂，Chrome + NVDA 可能完全忽略该组 -
<fieldset> <legend></legend> <input name="city"> </fieldset>❌ 屏幕阅读器播报“空白分组”，比不写更误导 -
<fieldset><legend><h3>收货地址</h3></legend></fieldset>❌<h3></h3>干扰名称获取，部分读屏器静音或跳过文本
动态渲染（React/Vue）时尤其容易出错：条件判断只包了 input，没把 legend 一起包进去，结果 DOM 中出现孤立 legend，WCAG 检查直接报 fieldset-missing-legend。
fieldset[disabled] 只禁用直接子级标准控件
给 fieldset 加 disabled 是批量禁用的捷径，但它有明确边界——不是所有内部控件都会被影响，也不是所有浏览器都一致支持。
- ✅ 生效：
<input>、<select></select>、<textarea></textarea>、<button></button>、<input type="radio">组（整组） - ❌ 不生效：
<div><input></div>中的input（div阻断继承链）、contenteditable元素、自定义 Web Component - ⚠️ 注意：
<input type="hidden">不受影响，仍会提交（这是规范行为） - ⚠️ 兼容性：旧版 Safari 和某些 Android WebView 中行为不一致；IE11 对灰度样式支持弱，需额外 CSS 处理
别试图用 fieldset[disabled] input { opacity: 0.5; } 模拟禁用态——原生 disabled 已经管了焦点、交互、提交逻辑，样式只是补充。
嵌套 fieldset ≥ 3 层极易破坏键盘导航
嵌套本身合法，但深层嵌套（≥3 层）会让 Tab 键导航卡住：用户按 Tab 进入内层后，很难再跳出，尤其当某层 legend 缺失、为空或被错误隐藏时，焦点管理逻辑会失效。
- 优先用单层
fieldset分组，靠 CSS（如margin、border-bottom）做视觉区隔 - 若必须嵌套，确保每层都有语义清晰的
<legend></legend>，且legend内不放任何交互元素（如<button></button>） - UI 框架（Ant Design、Bootstrap）常剥离
fieldset，只留视觉结构——务必检查最终渲染 DOM，确认fieldset和legend真实存在 - 用
document.activeElement+console.log实时观察焦点路径，比依赖默认 Tab 顺序更可靠
form 属性让 fieldset 脱离父 form 也能提交
当 fieldset 物理位置不在 <form></form> 标签内时，可用 form="myForm" 显式关联，它所含控件仍会参与该表单提交。
- 语法：
<fieldset form="myForm"> <legend>地址</legend> <input name="city"> </fieldset> <form id="myForm"></form> - 浏览器支持已稳定（Chrome/Firefox/Safari/Edge），但 IE 不支持
- 注意：关联后，
fieldset内部控件的name仍需唯一，否则提交时值会被覆盖 -
label点击行为在 Chrome 和 Firefox 中不一致：Chrome 允许穿透点击禁用控件，Firefox 直接拦截——必须真机测试
最易被忽略的点是：嵌套过深、框架剥离语义、或动态渲染时 legend 未同步控制，这些都会让 fieldset 形同虚设——它看起来像分组，其实既不被读屏器识别，也不受原生表单行为约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
