fieldset+legend是表单逻辑分组的必需语义结构，能向辅助技术传递明确边界；label需显式for/id或完整包裹控件；禁用整组用fieldset disabled更可靠；CSS应优先用gap、line-height+padding等健壮方案。
直接用 div 堆表单，是绝大多数人踩进可访问性与维护性坑的起点。真正影响体验的不是颜色或动画，而是结构是否让浏览器、屏幕阅读器和开发者都能一眼看懂字段关系。
为什么 fieldset + legend 不是可选项
当表单里出现“登录信息”“收货地址”“支付方式”这类逻辑分组时，fieldset 不只是视觉容器——它会向辅助技术传递明确的语义边界。没有它，屏幕阅读器会把所有输入框线性读完，用户无法感知“这组三个字段属于一个上下文”。
-
legend必须作为fieldset的第一个子元素，否则语义断裂 - 多个
fieldset可嵌套，但深层嵌套（超过两层）会让焦点导航变混乱 - 禁用整组字段？直接给
fieldset加disabled属性，比遍历每个input更可靠
label 的 for 和隐式包裹哪个更稳
显式写 for="xxx" + id="xxx" 是兼容性最稳妥的做法，尤其在动态渲染或框架中 ID 可能被重写时；而隐式包裹（label 里直接包 input）虽简洁，但一旦中间插入空格、换行或注释，部分旧版 Safari 会断开关联。
- 别用
placeholder替代label：输入后文字消失，对认知障碍用户极不友好 - 复选框/单选组的
label应该包住整个选项项，而不是只包文字，确保点击区域足够大 - 如果 label 文字很长，用
display: block避免文字折行后与 input 错位
CSS 布局中容易被忽略的垂直节奏控制
表单字段之间的间距不统一，是视觉疲劳的主要来源。单纯靠 margin-bottom 容易在响应式断点下错乱，更可靠的是用 flex 或 grid 控制整体流，再配合 gap。
立即学习“前端免费学习笔记（深入）”；
- 避免给
input设固定height：不同字体、缩放比例下会导致文字截断或上下偏移 - 用
line-height+padding组合控制输入框高度，比纯 height 更健壮 - 移动端慎用
float布局表单：iOS Safari 对 float+input 的 focus 行为有兼容问题
真正难的不是让表单“看起来整齐”，而是让它的结构在无样式、无 JS、仅靠键盘导航时依然可理解。很多所谓“体验优化”动作，比如加动画、换配色，反而掩盖了底层结构松散的问题——先填平 fieldset 和 label 这两个坑，再谈其他。
