必须设置type和name属性:type="password"隐藏字符,name确保后端接收数据;autocomplete需显式设为current-password或new-password;pattern、minlength仅前端校验,inputmode="text"优化移动端全键盘调出。

type="password" 是唯一必需的设置,其他都是增强项;不设 name 就等于没写这个字段——表单提交时它直接消失。
必须写的两个属性:type 和 name
浏览器只靠 type="password" 就能隐藏字符,但若漏掉 name,哪怕用户输了一百遍密码,POST 或 GET 提交时后端也收不到任何值。这不是 bug,是 HTML 表单规范:无 name 的控件不参与序列化。
示例写法:
<input type="password" name="password">
额外建议加 id,方便后续用 JS 获取或关联 <label for="pwd">,但不是强制。
立即学习“前端免费学习笔记(深入)”;
autocomplete 不能靠默认,得显式控制
Chrome 86+、Edge 90+ 会主动尝试填充已保存的密码,哪怕你没写 autocomplete,只要 type="password" 就可能触发。这不是“记住密码”功能被误用,而是浏览器把所有密码框都当成潜在的登录/改密入口。
-
autocomplete="off"多数情况有效,但部分新版 Chrome 会忽略 -
autocomplete="new-password"更可靠,明确告诉浏览器:“这是注册页或重置页的新密码,别填旧的” -
autocomplete="current-password"仅用于登录页的“当前密码”输入框(比如修改密码前的身份确认) -
autocomplete="false"完全无效,浏览器根本不识别这个值
pattern 和 minlength 是体验层,不是安全层
它们只在前端校验,用户禁用 JS、绕过表单、用 curl 直接发请求,这些约束就形同虚设。
常见组合示例:
<input type="password" name="password" minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="至少8位,含数字+小写字母+大写字母">
注意点:
-
pattern不支持正则标志(如/i),大小写必须写成[a-zA-Z]或分开断言 -
title属性必须提供,否则浏览器出错提示可能是英文默认文案,且部分移动端不显示 -
minlength是 HTML5 原生属性,比用 JS 写校验更轻量,但依然可被绕过
移动端软键盘适配常被忽略
iOS 和 Android 对 type="password" 默认倾向调出数字/符号键盘,导致用户要切好几次才能输入大小写字母+数字+符号的密码。
解决方法是加 inputmode="text":
<input type="password" name="password" inputmode="text">
这个属性不改变语义(仍是密码框),只影响软键盘布局,强制弹出全键盘。2026 年主流 WebView(Chrome、Safari、Webview 127+)均已稳定支持。
真正容易被忽略的是:很多人加了 inputmode 却忘了测试真机——模拟器里看不出软键盘行为差异,只有在 iPhone 或 Pixel 实机上点一下才知有没有生效。



















