HTML密码框用<input type="password">即可实现基础安全，无需额外JS或CSS；需设name和id属性，禁用value预填，密码管理器识别依赖语义化上下文与正确autocomplete值。
HTML密码框用 <input type="password"> 就够了
不需要额外JS或CSS，原生<input>标签加type="password"属性就能实现基础密码输入——浏览器自动隐藏字符、禁用自动填充（部分场景下）、不暴露明文到DOM中。
常见错误是写成type="text"再靠CSS遮盖，或者误以为要加autocomplete="off"才安全——其实现代浏览器对type="password"默认就有基础防护，强行关autocomplete反而可能干扰密码管理器。
-
name属性必须设，否则表单提交时该字段不会被发送 - 别漏掉
id，否则关联<label for="xxx">会失效 - 不要用
value预填敏感值（如从后端模板注入），容易被JS意外读取或日志泄露
为什么密码框有时不触发密码管理器？
密码管理器（如1Password、Bitwarden）能否自动填充，关键不在type，而在上下文语义是否明确——它需要识别出“这是登录表单里的密码字段”。
典型失灵场景：
立即学习“前端免费学习笔记（深入）”；
- 密码
<input>前面没有对应的username或email字段（比如只有单个密码框） -
name值写成了pwd、pass等模糊名称，而主流管理器更认password、current-password、new-password - 表单没包在
<form>里，或form缺少action和method（哪怕只是method="get"） - 用了
autocomplete="new-password"但旁边没有new-password配对的确认字段（如“重复新密码”）
autocomplete 的三个关键值怎么选？
autocomplete不是开关，是提示。浏览器和密码管理器按这个值决定行为逻辑：
-
autocomplete="current-password"：用于登录页，告诉浏览器“这是已有账号的密码”，可触发自动填充 -
autocomplete="new-password"：用于注册/改密页，表示“这是要设置的新密码”，通常禁用自动填充，防误填旧密码 -
autocomplete="off"：不推荐。现代浏览器常忽略它，尤其在type="password"时；真要禁用，不如用autocomplete="new-password"更可靠
注意：autocomplete值区分大小写，写成Current-Password或NEW-PASSWORD无效。
移动端软键盘弹不出密码类型？
iOS Safari 和 Android Chrome 在type="password"时本应唤起带“切换可见性”图标的键盘，但若出现普通文本键盘，大概率是以下原因：
- 父容器用了
transform或opacity: 0等导致浏览器无法正确识别输入域（特别是动态渲染的表单） - 页面缩放被强制设为
user-scalable=no，部分安卓 WebView 会降级处理输入类型 - 没设
inputmode="text"（虽然type="password"已隐含此意，但某些低版本WebView需要显式声明）
实测有效的兜底写法：<input type="password" inputmode="text" autocomplete="current-password">。
真正难搞的是密码可见性切换按钮的兼容性——它不是标准HTML控件，得自己用<button> + JS控制type在password和text间切换，这时候记得同步改aria-label和图标状态，不然视障用户会困惑。
