直接使用 <input type="password"> 即可创建密码输入框，浏览器原生掩码显示；必须设 type="password" 和 name 属性，推荐加 id、autocomplete="current-password"、required、spellcheck="false"、autocapitalize="none" 及 aria-label；移动端 PIN 码宜用 type="tel" 配 inputmode="numeric"；显示/隐藏密码应动态切换 type，禁用双 input 方案；该标签仅隐藏不加密，安全依赖 HTTPS 与后端哈希。
直接用 <input type="password"> 就能创建密码隐藏输入框。浏览器会自动把用户输入的字符显示为圆点（●）或星号（*），这是原生支持的行为，不需要额外写 JavaScript 或 CSS。
基础写法必须包含这些属性：
-
type="password"：启用掩码渲染 -
name="xxx"：必须设置，否则表单提交时该字段不会被发送 -
id="xxx"：推荐设置，方便用 JS 操作或<label for="xxx">关联
示例：
<input type="password" id="user-pwd" name="password">
增强可用性和兼容性，建议补充：
立即学习“前端免费学习笔记（深入）”；
-
autocomplete="current-password"：帮助密码管理器识别并自动填充（不加可能无法保存） -
required：防止空提交，前端基础校验 -
spellcheck="false"：禁用拼写检查，避免干扰输入 -
autocapitalize="none"：防止首字母自动大写 -
aria-label="密码"：提升屏幕阅读器体验
移动端注意：
- 默认键盘因系统而异，iOS 通常弹字母键盘；如需数字键盘（如 PIN 码），
type="password"不适用，应改用type="tel"+inputmode="numeric"，或用 JS 控制的明文输入+视觉掩码（但需谨慎处理安全性与可访问性）
要实现“显示/隐藏密码”按钮：
- 用 JavaScript 动态切换
input.type在"password"和"text"之间 - 切换时同步更新按钮的
aria-pressed和图标状态 - 失去焦点时自动切回
"password"，防止明文残留 - 不要用两个 input 并存的方式，容易导致值不同步、光标错位或粘贴异常
记住：type="password" 只隐藏显示，不加密、不阻止 JS 读取明文。真正安全靠 HTTPS 传输 + 后端哈希存储。
