应使用 <input type="password"> 而非 type="text" 加 CSS 遮盖，因其原生支持内容遮蔽、密码管理器协作与可访问性；必须设置 name 和 id，避免滥用 autocomplete="off" 或 placeholder，校验应在提交前进行而非实时拦截。
用 <input type="password"> 创建密码框
直接用 type="password" 就行，浏览器会自动遮盖输入内容（通常显示为圆点或星号），这是最基础也最安全的做法。它和 type="text" 共享大部分属性，但语义明确、行为隔离——比如密码框不会被浏览器默认自动填充普通文本字段的值，也不会出现在页面源码的明文提示中。
常见错误是手动加 autocomplete="off" 试图“禁用”密码保存，这反而可能干扰现代浏览器的密码管理器，导致用户无法正常保存或填充密码。除非有强合规要求（如金融类一次性口令输入），否则不建议加。
为什么不能用 type="text" + CSS 遮盖文字
有人想用 type="text" 配合 text-security: disc 或 font-family: monospace 模拟密码效果，这是危险的伪安全：
- DOM 中值仍是明文，JS 读取
input.value时直接暴露 - 屏幕阅读器可能朗读原始字符，破坏可访问性
-
text-security不是标准属性，Chrome/Firefox 支持不一致，Safari 完全不支持 - 复制粘贴时，用户可能意外粘出明文密码
必须配合的属性：name 和 id
仅靠 type="password" 不足以让表单正常提交或被 JS 安全操作：
立即学习“前端免费学习笔记（深入）”；
-
name属性是服务端接收字段名的关键，漏掉会导致后端收不到该字段 -
id是关联<label for="xxx">的必要条件，缺失会降低可访问性（屏幕阅读器无法将标签与控件绑定） - 避免用
placeholder显示“请输入密码”之类提示——它在聚焦后消失，且对低视力用户对比度不足；改用<label>更可靠
示例正确写法：
<label for="user-pass">密码</label><br><input type="password" id="user-pass" name="password">
密码框的交互边界：别强行限制输入内容
开发者常想用 pattern、oninput 或正则实时校验密码强度，但要注意：
-
pattern只在表单提交时触发，无法覆盖所有弱密码场景（比如纯数字但长度够） - 用 JS 监听
input事件并删掉非法字符（如空格、emoji），会破坏用户编辑体验——比如想删掉中间某个字符时，光标可能跳到末尾 - 真正该做的是：提交前用 JS 做完整校验，并给出清晰反馈；而不是在输入过程中“卡住”用户
- 允许粘贴（
onpaste默认允许），禁止才需要额外拦截，而密码管理器依赖粘贴功能
