type="password"仅实现视觉遮蔽而非加密,需配合name属性提交,不能替代后端校验、强度验证及安全防护措施。

用 type="password" 就能实现基础密码框
HTML 中最直接的方式就是给 <input> 设置 type="password" 属性。浏览器会自动将输入内容显示为圆点或星号,同时不改变底层值——提交时仍是明文(注意:这只是视觉遮蔽,不是加密)。
常见错误是写成 type="pwd" 或漏掉引号,导致退化为默认 type="text",输入内容完全可见。
-
<input type="password" name="passwd">是最小可用形态 - 必须搭配
name属性,否则表单提交时该字段不会被发送 - 不要依赖
type="password"防止敏感信息泄露——它不阻止开发者工具查看 value、不防截屏、不防键盘记录
为什么不能只靠 type="password" 做安全校验
这个属性纯属 UI 层行为,对服务端完全无影响。后端收到的仍是原始字符串,和 type="text" 提交的内容一模一样。
典型误用场景:用户以为加了 type="password" 就“安全了”,结果没做长度限制、没校验强度、没防暴力提交。
立即学习“前端免费学习笔记(深入)”;
- 密码强度应在前端用 JavaScript 监听
input事件实时提示,但最终必须由后端验证(比如要求至少 8 位 + 大小写字母 + 数字) - 避免在
value属性里预填密码(如<input type="password" value="123456">),这会让初始值暴露在 HTML 源码中 - 若需“显示/隐藏”切换,不要用
type="text"和type="password"频繁切换——部分浏览器会清空输入框或触发 autocomplete 异常
autocomplete 属性对密码框的实际影响
现代浏览器对 type="password" 默认启用密码管理器,但行为受 autocomplete 值控制。设成 autocomplete="off" 并不能可靠禁用自动填充,尤其在 Chrome 80+ 后已被弱化。
更有效的方式是使用语义化值:
-
autocomplete="current-password":告诉浏览器这是当前账户的登录密码,用于自动填充 -
autocomplete="new-password":用于注册页或改密页,提示浏览器不要用已有密码填充 - 若混用
name="password"和autocomplete="off",某些浏览器反而更倾向于强行填充,造成 UX 错乱
移动端软键盘适配要注意 inputmode 和 autocapitalize
iOS 和 Android 在密码输入时默认关闭自动大写和预测,但显式声明能减少意外:
- 加上
inputmode="text"(不是"numeric"或"decimal")确保调出全键盘,避免数字键盘挡住字母/符号 -
autocapitalize="none"防止首字母自动大写(密码通常区分大小写) - 别加
spellcheck="true"—— 密码字段不支持拼写检查,设了也无效,还可能触发奇怪下划线
真正容易被忽略的是:密码框在 Safari iOS 上如果未设置 width 或被父容器约束过死,可能出现光标错位或无法唤起软键盘——建议用 min-width: 200px 起手测试。



















