前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库HTML autocomplete 密码自动填充实践
HTML表单与输入

密码表单的 autocomplete 应该怎么写?

autocomplete 用来提示浏览器和密码管理器字段的用途。登录页现有密码使用 current-password,注册或重设密码使用 new-password,用户名可用 username。autocomplete="off" 是关闭自动填充的提示,不保证密码字段不会被浏览器或密码管理器填充;不要依赖它实现安全控制。

前端进阶之旅 · 一题精讲更新于 2026.09.29
HTML#表单与输入#表单
先看核心答案读代码示例
理解线索

正确 token 帮助密码管理器

  1. current-password登录已有密码用它,避免被当成注册新密码
  2. new-password注册和重设用它,帮助生成并保存新的强密码
  3. autocomplete="off"只是提示,浏览器和密码管理器可能仍选择填充

浏览器和密码管理器可能仍提供登录凭据,不能把它当成可靠开关。

核心回答

先记住这个答案

密码字段的 autocomplete 应告诉浏览器它是现有密码还是新密码:登录用 current-password,注册和重设用 new-password。off 只是提示,并不可靠阻止浏览器或密码管理器填充;强行关掉反而可能妨碍用户使用强密码。若业务要控制会话或认证,应在服务端处理,不能把自动填充开关当安全边界。

  • 登录密码用 current-password
  • 新密码用 new-password
  • 账号字段可用 username
  • off 不是安全控制

注册页密码不该填进旧密码

注册页的“设置密码”框如果错误标成 current-password,密码管理器可能把旧密码填进来。把注册、重设表单标为 new-password,登录表单标为 current-password,再给账号框标 username,有助于浏览器识别流程。一次性验证码可用 one-time-code。公共电脑上的敏感操作应依靠重新认证、会话过期等机制,不能把“关闭自动填充”当作安全边界。

登录表单使用正确自动填充语义HTML
<form action="/login" method="post">
  <input name="user" autocomplete="username">
  <input type="password" name="password" autocomplete="current-password">
  <button type="submit">登录</button>
</form>
<!-- 注册密码框改用 autocomplete="new-password" -->

浏览器会综合字段类型、名称、autocomplete token 和用户保存的凭据判断是否填充。

正确 token 帮助密码管理器

规范化 token 给出更清楚的语义,但最终填充行为仍受用户设置和密码管理器策略影响。off 不是强制命令,特别是登录凭据场景,浏览器可能为了用户安全与便利继续提供填充。应用应允许密码管理器生成和使用强密码,同时用服务端认证与权限校验保证安全。

注册页若把新密码字段误标成 current-password,密码管理器可能把已有账号密码填进来;重设密码也可能被误判成登录。相反,登录页用 new-password 会误导生成强密码的流程。应给用户名与密码字段稳定、准确的 name 和 autocomplete token,实际在目标浏览器与密码管理器里走一次注册、登录和重设,不靠一个 off 解决混填。

一次性验证码和新密码也不应混作一个字段。验证码可根据用途给相应的自动填充提示;新密码的 new-password 有助于密码管理器生成并保存强密码。测试中若浏览器没有按预期填充,除了 token 还要看字段标签、name 和页面是否在输入过程中重新创建 DOM 节点。把全部字段都设成 off 往往只是掩盖了字段语义不清。

回答前,多想一步

容易答错的地方

以为 autocomplete="off" 一定生效
浏览器和密码管理器可能仍提供登录凭据,不能把它当成可靠开关。
注册和登录密码都写 current-password
新密码字段应使用 new-password,避免与已保存密码混淆。
试着用自己的话回答

面试官还会怎么问?

重设密码页的新密码框写什么?

写 new-password;如有当前密码验证框,那个字段写 current-password。

一次性验证码用什么 token?

可以使用 one-time-code,提示浏览器这是一次性验证码字段。

禁用自动填充能提高安全吗?

不能代替认证和会话保护;阻碍密码管理器还可能让用户选择更弱的密码。

从一道题,走向一组知识

把知识连起来

表单与输入

autocomplete 属性里的 token 怎么组合才能让浏览器正确填入地址和银行卡?

更细的自动填充 token 可区分姓名、地址和一次性验证码。

表单与输入

表单里的 autofocus 会在什么时候抢走焦点?

autofocus 只影响初始焦点,不会代替密码字段正确的 autocomplete 语义。

参考资料

  • HTML:表单与输入参考资料

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 注册页密码不该填进旧密码
  3. 正确 token 帮助密码管理器
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑