如何让浏览器将重置密码与邮箱关联而非验证码保存

Chrome会把新密码和验证码关联而非邮箱，核心原因是它忽略了隐藏的邮箱字段，还误把验证码当成了身份标识。可以通过以下几个修改解决：

• 把隐藏邮箱字段改为可见但不可交互的状态
  Chrome对隐藏字段的识别优先级很低，改成可见但用户无法修改的字段，就能让浏览器捕捉到这个身份关联项。示例代码：

  <input class="form-control" type="email" name="email" value="$email" autocomplete="username email" readonly tabindex="-1" style="opacity: 1; pointer-events: none;">
  

  其中readonly禁止修改，tabindex="-1"避免被键盘焦点选中，样式保持可见，确保浏览器能识别到这是关联的邮箱账号。

• 给验证码字段标记一次性代码属性
  明确告诉Chrome这个字段是一次性验证码，不是身份账号，避免被错误关联。给验证码输入框加上autocomplete="one-time-code"：

  <input class="form-control" type="text" name="code" id="code" autocomplete="one-time-code">
  

• 调整字段顺序
  把邮箱字段（修改后的可见不可交互版本）放在验证码字段的前面。浏览器通常会把第一个识别到的身份字段和后续密码字段绑定，调整顺序后Chrome会优先关联邮箱和新密码。

• 明确密码字段的autocomplete属性
  保持密码和确认密码字段的autocomplete="new-password"，这能明确告诉浏览器这是要保存的新密码，配合前面的邮箱字段，就能建立正确的关联。

调整后的完整表单代码示例：

<form method="post" action="/reset-password">
  <input class="form-control" type="email" name="email" value="$email" autocomplete="username email" readonly tabindex="-1" style="opacity: 1; pointer-events: none;">
  <input class="form-control" type="text" name="code" id="code" autocomplete="one-time-code">
  <input class="form-control" type="password" name="password" id="password" autocomplete="new-password">
  <input data-parsley-equalto="#password" name="confirm-password" class="form-control" type="password" id="confirm_password" autocomplete="new-password">
  <button type="submit">重置密码</button>
</form>

内容的提问来源于stack exchange，提问作者Damon Brodie