HTML输入标签如何使用创建密码隐藏输入框

直接使用 <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。

基础写法必须包含这些属性：

1. type="password"：启用掩码渲染
2. name="xxx"：必须设置，否则表单提交时该字段不会被发送
3. id="xxx"：推荐设置，方便用 JS 操作或 <label for="xxx"> 关联

示例：

<input type="password" id="user-pwd" name="password">

增强可用性和兼容性，建议补充：

1. autocomplete="current-password"：帮助密码管理器识别并自动填充（不加可能无法保存）
2. required：防止空提交，前端基础校验
3. spellcheck="false"：禁用拼写检查，避免干扰输入
4. autocapitalize="none"：防止首字母自动大写
5. aria-label="密码"：提升屏幕阅读器体验

移动端注意：

1. 默认键盘因系统而异，iOS 通常弹字母键盘；如需数字键盘（如 PIN 码），type="password" 不适用，应改用 type="tel" + inputmode="numeric"，或用 JS 控制的明文输入+视觉掩码（但需谨慎处理安全性与可访问性）

要实现“显示/隐藏密码”按钮：

1. 用 JavaScript 动态切换 input.type 在 "password" 和 "text" 之间
2. 切换时同步更新按钮的 aria-pressed 和图标状态
3. 失去焦点时自动切回 "password"，防止明文残留
4. 不要用两个 input 并存的方式，容易导致值不同步、光标错位或粘贴异常

记住：type="password" 只隐藏显示，不加密、不阻止 JS 读取明文。真正安全靠 HTTPS 传输 + 后端哈希存储。