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