必须用 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 显式划分语义区域：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 每个 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 都承担明确的语义职责——而不是仅仅“看起来像表单”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！