label标签必须显式绑定input[type="password"]，即for属性值与input的id属性值逐字符完全一致，否则点击文字无法聚焦、屏幕阅读器无法识别、tab导航失效；同时密码框必须设置name属性才能提交数据。
label 标签必须显式绑定 input[type="password"]，否则点击文字无法聚焦密码框——这不是“看起来能用”，而是无障碍、可访问性和基础交互的硬性要求。
为什么 label for 和 input id 必须逐字符一致
浏览器只认 for 属性值与目标 input 的 id 字符串完全相等。大小写、连字符、下划线、空格，差一个都不行。屏幕阅读器、键盘 Tab 导航、触屏点击都依赖这个绑定关系。
-
<label for="pwd">密码</label><input type="password" id="password">→ 失效（for="pwd"≠id="password"） -
<label for="Password">密码</label><input type="password" id="password">→ 失效（大小写不匹配） -
<label for="password">密码</label><input type="password" id="password">→ 有效
嵌套写法更安全但有明确限制
把 input[type="password"] 直接写进 label 标签内部，天然绑定，无需 for/id 配对——适合简单场景，但不是万能解法。
- ✅ 正确：
<label>密码：<input type="password" name="password"></label> - ❌ 错误：
<label>密码：<input type="password" name="pwd"><span class="hint">至少8位</span></label>（span不是可交互控件，但嵌套结构允许；不过语义已混杂，推荐拆开） - ⚠️ 注意：如果密码框后续要被 JS 移动、克隆或动态替换 DOM，嵌套结构容易断裂，
label失去控制力
密码框必须加 name 属性才能提交
type="password" 只负责视觉隐藏，不自动参与表单数据提交。没有 name，后端收不到这个字段。
- 缺
name：<input type="password" id="password">→ 提交时该字段完全消失 - 正确写法：
<label for="password">密码</label><input type="password" id="password" name="password" required> - 若需防自动填充干扰（如密码管理器误填），可加
autocomplete="new-password"，但不能替代name
最易被忽略的一点：label 和 password input 的绑定不是“锦上添花”，而是表单功能成立的前提。没绑定，等于没写；绑错，等于写了假代码。检查方式很简单：在 DevTools 里右键 label → “Edit as HTML”，复制 for 值，全局搜索是否作为 id 存在且唯一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
