密码框需设type="password"并补充id、name、autocomplete="current-password"、required等属性，确保表单提交、密码管理器填充及基础校验；其value在js中恒为明文，严禁拼入url或localstorage；移动端应据需选用type="tel"+inputmode或type="text"+js掩码；须加autocapitalize="none"和spellcheck="false"（或"off"）优化输入体验。
用 type="password" 就能隐藏输入内容，但别只写这一行
直接给 <input> 加 type="password" 确实会让字符显示为圆点或星号，但实际项目里光这样容易出问题。比如用户想粘贴密码却没提示、移动端键盘没弹出数字键、屏幕阅读器读不出“这是密码框”——这些都会导致体验断裂。
推荐写法：
<input type="password" id="user-password" name="password" autocomplete="current-password" required>
-
id和name必须有，否则表单提交拿不到值，JS 也取不到元素 -
autocomplete="current-password"告诉浏览器这是登录用的密码字段，能触发密码管理器自动填充（不加这个，Chrome 可能拒绝保存） - 加上
required避免空提交，服务端不该是唯一校验层
为什么 input[type=password] 的值在 JS 里还是明文？
这是设计使然：type="password" 只控制**渲染层**的显示，DOM 的 value 属性始终是原始字符串。你可以用 JS 直接读写它，比如做强度校验、加密前处理、或传给后端。
常见误操作：
- 以为加了
type="password"就“安全了”，结果在控制台打document.getElementById('user-password').value一眼看到明文 - 用
innerHTML或innerText去取值——错，必须用.value - 把密码拼进 URL 或 localStorage —— 这些地方根本没有“隐藏”机制，和 input 类型无关
移动端上，type="password" 键盘不弹数字？
默认行为因系统而异：iOS 通常弹字母键盘，Android 多数弹带数字的混合键盘。如果业务强依赖数字（比如 PIN 码），type="password" 不合适，得换方案。
可选做法：
- 纯数字 PIN：用
type="tel"+inputmode="numeric"+ CSS 掩码（如text-security: disc，但兼容性差） - 仍要密码语义但希望数字优先：加
inputmode="decimal"，部分 Android 会优化键盘布局 - 真要掩码又控键盘？只能用
type="text"+ JS 拦截粘贴/输入 + 动态替换 DOM 文本（慎用，无障碍和复制粘贴会受损）
看不见的坑：autocapitalize 和 spellcheck
这两个属性在密码框里常被忽略，但它们会影响实际体验：
- iOS Safari 默认开启首字母大写，用户输密码时不小心开了 Caps Lock，自己都意识不到——加
autocapitalize="none"关掉 - 某些安卓输入法会对密码字段做拼写检查并下划红线，干扰视觉，加
spellcheck="false" - 部分旧版 UC 浏览器会把
spellcheck="false"当成无效值，必须写成spellcheck="off"才生效（虽然规范是 boolean）
完整最小可用示例里，这几个属性往往比样式更关键。密码框不是“看起来像”就行，它得在各种设备、各种输入法、各种辅助工具下都稳住语义和行为。
