关于HTML5 autocomplete=new-password双确认字段的密码同步生成问题

好问题！这确实是设置密码确认字段时容易踩的小坑，我来给你捋清楚正确的配置方式，确保主流浏览器能自动为两个输入框填充相同的生成密码。

• 核心配置逻辑：两个密码输入框都需要使用autocomplete="new-password"，并且通过相同的自定义section前缀来关联它们，告诉浏览器这两个字段属于同一个密码设置上下文。

• 具体代码示例：

<form>
  <div>
    <label for="new-password">设置新密码</label>
    <input 
      type="password" 
      id="new-password" 
      name="new_password" 
      autocomplete="section-profile new-password"
    >
  </div>
  
  <div>
    <label for="confirm-password">确认新密码</label>
    <input 
      type="password" 
      id="confirm-password" 
      name="confirm_password" 
      autocomplete="section-profile new-password"
    >
  </div>
  
  <button type="submit">提交</button>
</form>

这里的section-profile是自定义的section名称，你可以换成任何合适的（比如section-account、section-signup），关键是两个字段的section前缀完全一致。

• 额外注意事项：

  1. 确保两个字段都在同一个<form>标签内，浏览器依赖表单上下文来识别关联字段；
  2. 不要给确认密码字段使用current-password或者其他不同的autocomplete值，必须和第一个字段保持new-password+相同section的组合；
  3. 字段的name属性尽量设置为语义化的值（比如new_password和confirm_password），这会辅助浏览器更准确地识别字段用途；
  4. 主流浏览器（Chrome、Firefox、Edge）都支持这种配置，亲测兼容性很好。

• 原理补充：

浏览器的自动填充系统会通过autocomplete属性的section前缀来分组字段，同一section下的同类型字段（这里是new-password）会被识别为属于同一个操作流程，所以生成密码时会自动把相同的值填充到两个框里，不需要用户手动复制粘贴。

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