最简实现密码输入框是设置type="password"，浏览器自动隐藏字符并默认禁用自动填充；需设name属性以确保表单提交，推荐设id便于关联label或JS操作；autocomplete="off"非必须但强烈建议，更精准可用"new-password"或"current-password"；pattern和minlength仅提供前端校验，不可替代后端验证；移动端应使用inputmode="text"确保全键盘输入。
用
HTML5 中设置密码输入框，核心就是把 type 属性设为 "password"。浏览器会自动隐藏字符（通常显示为圆点或星号），且默认禁用自动填充（部分新版浏览器会尝试智能填充，需额外控制）。
基础写法：
注意：name 属性必须设置，否则表单提交时该字段不会被发送；id 推荐设置，方便关联 或 JS 操作。
必须加 autocomplete="off" 吗？
不是“必须”，但强烈建议显式声明。现代浏览器（Chrome 86+、Edge 90+）对 type="password" 的自动填充行为更激进，默认可能忽略历史关闭逻辑。不加 autocomplete，用户点击密码框时仍可能弹出密码管理器建议。
立即学习“前端免费学习笔记（深入）”；
稳妥写法：
-
autocomplete="new-password"更精准：告诉浏览器这是新建密码字段，避免复用旧密码建议 -
autocomplete="current-password"仅用于登录页的“当前密码”输入（如修改密码前校验） - 不要用
autocomplete="false"—— 无效，浏览器不识别
pattern 和 minlength 能替代后端校验吗？
不能。它们只提供前端即时反馈，可提升体验，但完全不可信。
pattern 支持正则（如要求至少 1 个数字 + 1 个大写字母）：
minlength 更简洁（HTML5 原生属性）：
- 这些约束在提交时由浏览器触发，但用户可禁用 JS、绕过 HTML 表单、直接发请求
- 正则中的
pattern不支持标志（如/i），大小写需显式写成[A-Za-z] -
title属性是必填提示文案，缺失时浏览器可能显示默认英文提示
移动端软键盘适配要点
iOS 和 Android 默认对 type="password" 显示数字/符号键盘，但有时仍需手动引导。关键属性是 inputmode：
-
inputmode="text"强制调出全键盘（含字母），适合需要大小写字母+数字+符号的密码 - 不要用
inputmode="numeric"—— 它会屏蔽字母，导致无法输入常见密码规则 - 部分安卓机型需配合
autocapitalize="off" autocorrect="off"关闭拼写纠正（虽对密码影响小，但能减少干扰）
真正容易被忽略的是：密码框失去焦点后，iOS 会清空光标位置记忆，用户再点击可能无法准确定位到末尾 —— 这不是 bug，是系统级安全策略，前端无法绕过。
