浏览器通过name和autocomplete属性协同识别用户名输入框，其中autocomplete="username"是关键信号，且用户名框必须位于密码框之前。

怎么让浏览器知道哪个输入框该填用户名

浏览器自动填充不是猜的，它靠 name 和 autocomplete 两个属性协同判断。只设 name="username" 不够稳定，尤其在 Chrome 88+ 和 Safari 中，autocomplete 已成关键信号。

• autocomplete="username" 明确告诉浏览器这是登录账号（邮箱或用户名都行）
• autocomplete="current-password" 和 autocomplete="new-password" 必须区分——改密页用后者，否则浏览器可能填错旧密码
• 避免用 name="user" 或 name="acc" 这类模糊值，浏览器识别率骤降
• 表单里多个文本框时，顺序也影响判断：用户名框必须在密码框之前，否则部分版本 Safari 会跳过填充

密码框被自动填充后样式错乱怎么办

Chrome 和 Edge 会给自动填充的 <input> 加上私有伪类 :autofill，但默认样式常和你的 CSS 冲突，比如背景色盖住文字、圆角消失、字体变小。

• 用 input:-webkit-autofill + input:-webkit-autofill:hover 覆盖（注意：仅 WebKit 内核有效）
• 别只写 background-color: #fff，要加 !important，否则会被浏览器内联样式压制
• 慎用 transition: all 在 input 上——自动填充触发时会闪一下，去掉过渡更稳
• 如果用了 appearance: none，记得在 :-webkit-autofill 里重置 border 和 padding，否则边框可能消失

autocomplete="off" 为什么经常失效

现代浏览器基本无视全局 autocomplete="off"，尤其对密码字段——这是故意设计的，为了安全。强行禁用反而触发兼容性降级逻辑。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 想阻止填充？把 autocomplete 设成随机字符串，比如 autocomplete="nope-123"，比 "off" 更可靠
• 表单级禁用（<form autocomplete="off">）在 Chrome 76+ 已被忽略，只对老 IE 有效
• 动态生成的密码框（如 JS 插入），要在插入后立刻设 autocomplete="new-password"，延迟设置可能被浏览器忽略
• 某些银行/金融站用 type="text" + JS 模拟密码框，本质是绕开自动填充，但牺牲了可访问性和移动端粘贴体验

表单提交后浏览器还记着旧值怎么清

用户改完资料点提交，刷新页面后输入框又回填上次内容，这不是缓存，是浏览器在 form 提交后仍保留字段值用于“恢复页面状态”。

立即学习“前端免费学习笔记（深入）”；

• 提交成功后，手动调用 form.reset() 是最直接的清理方式
• 如果用 fetch/AJAX 提交，记得在 then 里执行 document.getElementById('myForm').reset()
• 别依赖 autocomplete="off" 清历史，它不负责清已提交过的值
• 服务端返回 302 跳转再渲染新页时，浏览器可能仍恢复原表单值——这时得在新页 onload 后清空一次 input.value = ''

自动填充不是开关题，是信号题。你给的属性越具体、越符合规范，浏览器响应越准；随便起个 name 或堆一堆 !important 反而让行为更不可控。