密码输入框必须用<input type="password">，仅此方式能可靠隐藏字符；type="text"加CSS遮盖无安全性，检查元素即见明文，且不阻止复制粘贴。
密码输入框必须用 type="password"
HTML 中没有独立的“密码标签”，只能靠 <input> 的 type 属性控制行为。设成 password 后，浏览器会自动隐藏输入内容（显示为圆点或星号），这是唯一可靠方式。
常见错误是写成 type="text" 再靠 CSS 遮盖文字——这毫无安全性，右键“检查元素”就能看到明文值，且复制粘贴仍为原始字符。
-
<input type="password" name="pwd">是最简可用写法 - 务必添加
name属性，否则表单提交时该字段不会被发送 - 避免使用
autocomplete="off"在现代浏览器中可能被忽略，或触发更激进的密码管理器干预
为什么不能只靠前端隐藏来“保护”密码
type="password" 仅影响渲染和用户感知，不加密、不校验、不阻止调试工具查看。所有密码逻辑必须后端处理：传输走 HTTPS，存储用哈希（如 bcrypt），前端不做任何解密或明文比对。
容易踩的坑包括：
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 把
type从text切换到password—— 某些旧版 Safari 会清空已输内容 - 给
input加readonly或disabled后忘记移除，导致提交时值为空 - 在 Vue/React 等框架中直接绑定
v-model或value时未同步更新type，造成输入闪烁或失焦
兼容性和辅助功能注意事项
绝大多数浏览器都支持 type="password"，但需注意两点：
- 屏幕阅读器通常会播报“密码字段”，若加了
aria-label，优先读取它；不要写“请输入密码（隐藏）”，“隐藏”属于视觉表现，无需告知 - 移动端软键盘会默认弹出数字/符号键盘，但无法强制——取决于操作系统和输入法，不用额外 hack
- Chrome 和 Edge 支持
autocomplete="current-password"或"new-password"，帮助密码管理器正确填充，建议按场景选用
要不要加“显示密码”按钮？怎么加才安全
加按钮本身没问题，但实现方式决定是否引入风险。核心原则：只改 type 值，不暴露原始字符串到 DOM 属性或变量中。
推荐做法：
- 用
input.type = "text"/input.type = "password"切换，而非修改input.value - 按钮状态用
aria-pressed标记，方便辅助技术识别 - 避免在切换时把 value 赋给其他变量或
data-属性，防止被脚本意外读取 - 别用
contenteditable或div模拟输入框——失去原生密码行为和安全性保障
真实场景里，密码框的复杂性不在标签写法，而在它如何融入整个认证流程：前后端约定、错误提示粒度、防暴力策略、以及是否被第三方脚本意外捕获。写对 type="password" 只是起点。
