label 和 required 必须配合 form、id、for 三者才能让校验真正“可用”——光加 required 不会触发移动端键盘特殊键（比如 @），光写 label 不绑定控件也不会聚焦，更不会提升可访问性。
label 的 for 和 id 不匹配，required 就等于没写
浏览器只认 for 属性值与目标 input 的 id 完全一致时，才把点击 label 的行为映射到输入框上。一旦拼错、多空格、大小写不一致，或者 id 重复，就会导致：
- 点击“邮箱”文字，焦点没落到邮箱输入框 → 用户得手动点输入框，体验断层
- 屏幕阅读器读不出关联关系 → 违反 WCAG 基础要求
- 移动端键盘不自动弹出对应类型键（如
type="email"但没正确label关联，@键不会默认出现）
务必检查：每个 label 的 for 值 = 对应 input 的 id，且整个页面唯一。
required 不在 form 里，就完全不生效
required 不是独立开关，它依赖表单提交上下文。常见失效场景：
立即学习“前端免费学习笔记（深入）”；
-
input写在form外面，哪怕加了required，点 submit 按钮也毫无反应 - 用 JavaScript 动态创建表单控件，但忘了给新
input补id，或漏设label的for - 表单用了
method="dialog"或自定义onsubmit但没调用checkValidity()，导致原生校验被绕过
验证是否生效最简单的方法：打开 DevTools，右键表单 → “检查元素”，确认所有带 required 的控件都在同一 form 标签下，并且该 form 有 type="submit" 按钮。
select 下拉框加 required，必须配空的 disabled option
select 的 required 不同于 input：它只在用户未选择任何有效项时才报错。但如果第一个 option 是普通空值（比如 <option value=""></option>），浏览器会把它当“已选中”，跳过校验。
正确写法必须同时满足三项：
- 第一个
option的value为空字符串 - 加上
disabled属性（阻止用户选中它） - 加上
selected属性（让它成为初始显示项）
示例：
<select name="category" required> <option value="" disabled selected>请选择分类</option> <option value="tech">技术</option> <option value="design">设计</option> </select>
嵌套 label 写法看似省事，实际只绑定第一个控件
有人图方便写：
<label>用户名:<input name="user">密码:<input type="password" name="pass"></label>结果是：只有“用户名”文字能聚焦第一个输入框，点击“密码”两字毫无反应。
原因在于 HTML 规范规定：一个 label 元素只能显式关联一个表单控件；嵌套模式下，浏览器只将第一个可交互子元素（即首个 input）纳入绑定范围。
要支持多个控件，必须拆成多个 label，各自用 for/id 显式绑定：
<label for="user">用户名:</label> <input id="user" name="user" required> <label for="pass">密码:</label> <input id="pass" type="password" name="pass" required>
最容易被忽略的是：label 和 required 的协同效果不是“加了就完事”，而是环环相扣——缺 form，校验不触发；缺 id/for，label 失效；缺 disabled selected 空选项，select 的 required 形同虚设。这三处任意一处出错，用户看到的就只是“点提交没反应”或“报错没提示”。
