fieldset 和 legend 是语义化分组机制，legend 必须为 fieldset 的首个子元素以确保屏幕阅读器正确播报；disabled 作用于直接子控件并影响表单提交；视觉重置后须手动补充分组线索。
fieldset 和 legend 不是用来“加边框+标题”的视觉技巧，而是浏览器原生支持的语义分组机制。漏掉 legend、位置错、或用 div 替代，可访问性就直接失效——屏幕阅读器会把所有输入框平铺播报，用户根本分不清哪几个属于“收货地址”。
为什么必须把 legend 放在 fieldset 的第一个子元素位置
这不是建议，是 HTML 规范强制要求。DOM 顺序决定语义绑定：屏幕阅读器（如 VoiceOver、NVDA）靠这个顺序把 legend 文本作为整组控件的可访问名称来播报。
- 错误写法：
<fieldset> <input name="zip"><legend>地址</legend> </fieldset>——legend不是首子节点，旧版 Safari 可能完全不识别 - 错误写法：
<fieldset> <div><legend>支付方式</legend></div> <input type="radio"> </fieldset>——legend被包裹，读屏器跳过，只报“单选按钮” - React/Vue 中避免用
Fragment或条件渲染（如{show && <legend>...</legend>}）插在legend前面，否则它不再是直接子节点 - 正确写法就是：
<fieldset> <legend>配送时间偏好</legend> <input name="time"> </fieldset>，纯文本，无空格、无注释、无嵌套标签
fieldset[disabled] 真实禁用逻辑与常见误判
给 fieldset 加 disabled 属性，不是“加个灰样式”，而是递归禁用所有直属子级表单控件（input、select、textarea、button），并自动排除在 FormData 提交之外。
- 被禁用的
input即使有name，也不会出现在form.submit()或new FormData(form)中 -
legend本身不可交互，加disabled没效果，也别试图用fieldset[disabled] input { opacity: 0.5; }模拟——原生禁用已处理焦点、键盘、提交逻辑 - 注意边界：禁用只作用于
fieldset的**直接子级**控件；如果input套在div里，它不受影响 - IE11 对
button兼容性差，建议保底加style="pointer-events: none;"
CSS 重置后必须手动补上视觉分组线索
删掉默认边框和内边距后，用户完全看不出哪块是一组。视觉分组提示必须由你主动补上，否则键盘导航时焦点框无处附着。
- 清掉
border后，至少保留outline: 2px solid #999或box-shadow: inset 0 0 0 1px #ccc -
legend默认有margin-bottom，全清掉会让标题紧贴控件顶部；建议只设legend { margin: 0.5em auto 0.75em; } - 在
display: flex容器中放fieldset，legend容易偏移或被裁剪；不要对legend设display: flex，改用display: inline-flex+align-items: center - 响应式场景下，
fieldset的padding建议用rem单位，避免小屏时文字紧贴边框导致可读性下降
最常被忽略的是：哪怕你只用 fieldset 做视觉分隔，只要没加 legend，就等于放弃了表单结构语义——这不是“锦上添花”，而是让整组字段在无障碍环境里彻底失语。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
