autocomplete="username"需搭配type="text"或type="email"、name="username"或name="email"、label显式关联及form包裹，并与autocomplete="current-password"成对使用，否则无法稳定触发浏览器自动填充。
要让 autocomplete="username" 在登录表单中真正生效、稳定触发浏览器自动填充，关键不是“加了就行”，而是让它和 type、name、label 协同工作，并避开常见干扰项。
必须搭配 type="text" 或 type="email" 使用
仅写 autocomplete="username" 但 type="text" 是基础要求；如果账号字段实际是邮箱登录，更推荐用 type="email" + autocomplete="username"，因为 Chrome 和 Safari 都支持这种组合——既能唤起邮箱键盘，又明确告诉浏览器“这是登录用的标识符”。
不要用 type="tel" 或 type="number" 配 username，类型冲突会导致填充逻辑被忽略。
name 属性需简洁通用，避免业务化命名
浏览器（尤其是 Safari 和 Firefox）会把 name 当作字段可信度的重要依据。以下写法效果差：
-
name="loginId"→ 非标准，Safari 很可能跳过 -
name="user_account"→ 下划线+业务词，不被识别 -
name="username"→ ✅ 推荐，语义清晰且与 autocomplete 值一致 -
name="email"+autocomplete="username"→ ✅ 合理，适用于邮箱即账号的场景
密码字段必须成对设置 current-password
单有 username 不够，浏览器需要上下文判断这是登录流程。密码框必须设为：
<input type="password" name="password" autocomplete="current-password">
注意：current-password 必须和 username 或 email 字段在同一个 <form></form> 内，且不能被 autocomplete="off" 覆盖。Chrome ≥76、Edge、Safari 都会强制忽略 autocomplete="off" 在密码字段上的作用，所以别写——它既无效，还可能干扰识别。
结构完整：label 显式关联 + form 包裹
避免只靠 placeholder 提示。每个字段都应有 <label for="xxx"></label> 显式绑定，例如：
<input id="user" name="username" autocomplete="username" type="text"><label for="user">账号</label>
整个表单必须包裹在语义化 <form></form> 中，且不能是 JS 动态插入后才补 autocomplete——浏览器只在初始 DOM 解析阶段读取这些语义，动态添加或 JS 修改 value 都可能错过填充时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
