必须用 label 的 for 属性绑定 input 的 id，禁用隐式嵌套；多字段需用 fieldset+legend 分组；name 应语义化，placeholder 仅作辅助提示，不可替代 label。
用 label 绑定输入控件，别只靠视觉对齐
很多人把 label 当成纯文本提示，写成 <label>邮箱</label><input type="email">，结果点击“邮箱”文字无法聚焦输入框——这直接削弱可访问性和移动端点击体验。
必须建立显式语义关联：
-
label的for属性值要严格等于对应input的id值（注意不是name） - 避免用
class或data-属性模拟关联，屏幕阅读器不识别 - 嵌套写法（
<label>邮箱<input></label>）虽能工作，但不利于复杂布局和 CSS 定位，调试时容易漏掉隐式依赖
用 fieldset + legend 分组逻辑区块
当表单字段超过 4 个，尤其含多组单选、复选或条件字段时，光靠空行或 CSS margin 分隔，对键盘用户和屏幕阅读器是无效的。浏览器不会把“空行”当作结构边界。
正确做法是用 fieldset 显式划分语义区域：
立即学习“前端免费学习笔记（深入）”；
- 每个
fieldset必须包含且仅包含一个legend，作为该组的标题 -
legend文本需简明，如“支付方式”比“请选择”更有效 - 不要为了样式放弃
legend；CSS 可隐藏它（position: absolute; clip: rect(0 0 0 0);），但不能删掉——否则语义断裂
给 input 设置有意义的 name 和 placeholder
name 不是给前端看的，是后端接收数据的唯一键名。写成 name="txt1" 或 name="inp_email" 会让后端同事抓狂，也增加 API 调试成本。
placeholder 是辅助提示，不是替代 label：
-
placeholder在输入后消失，无法持续传达字段用途；而label始终可见 - 避免用
placeholder="必填"这类状态描述，应写具体预期值，如placeholder="example@domain.com" - 中文 placeholder 不要用全角空格或特殊符号占位，部分老浏览器会渲染异常
避开常见可读性陷阱
表单可读性差，往往不是因为没写标签，而是因为标签和控件在 DOM 中物理相邻，但语义脱节。
- 用
display: flex或grid布局时，别把label和input拆到不同容器里——即使视觉对齐，for/id关联仍有效，但某些无障碍工具可能因 DOM 距离远而弱化提示优先级 - 动态生成表单（如 JS 插入字段）时，务必同步生成匹配的
id和for，避免重复 ID 或遗漏绑定 -
type="checkbox"和type="radio"必须有name才能形成互斥/多选组；单独存在时，name缺失会导致提交时被忽略
label、每个 fieldset、每个 name 都承担明确的语义职责——而不是仅仅“看起来像表单”。 
