如何让Chrome密码管理器在注册时保存邮箱而非用户名作为凭证？

要让Chrome密码管理器可靠地将邮箱作为登录凭证保存，核心是明确标记邮箱字段为登录用的用户名标识，同时正确定义显示名字段的用途，具体调整如下：

注册表单调整方案 #

修改注册表单的autocomplete属性，并修正标签与输入框的关联（帮助Chrome正确识别字段用途）：

<form>
  <!-- 显示名字段：明确标记为nickname，标签用for关联输入框 -->
  <label for="displayname">Username</label>
  <input type="text" id="displayname" name="displayname" autocomplete="nickname" />

  <!-- 邮箱字段：同时标记为username和email，告知Chrome这是登录凭证的用户名部分 -->
  <label for="register_email">Email</label>
  <input type="email" id="register_email" name="register_email" autocomplete="username email" />

  <input type="email" id="register_email_confirm" name="register_email_confirm" autocomplete="off" />

  <input type="password" id="register_password" name="register_password" autocomplete="new-password" />
  <input type="password" id="register_password_confirm" name="register_password_confirm" autocomplete="new-password" />
</form>

登录表单调整方案 #

给登录页的邮箱字段也添加autocomplete="username email"，确保Chrome匹配到正确的凭证：

<form>
  <input type="email" id="login_email" name="login_email" autocomplete="username email" />
  <input type="password" id="login_password" name="login_password" autocomplete="current-password" />
</form>

关键调整说明 #

• 邮箱字段的autocomplete="username email"：Chrome密码管理器将username标识的字段作为登录凭证的"用户名"部分，同时加上email明确字段类型，确保Chrome优先把这个字段和密码配对保存，而非显示名字段。
• 显示名字段的autocomplete="nickname"：明确告知Chrome该字段是用户昵称/显示名，不属于登录凭证范畴，避免被误识别为用户名。
• 修正标签位置与关联：将标签放在输入框前，并通过for属性关联对应输入框，帮助Chrome自动填充系统更准确识别字段用途（此前标签在输入框后可能干扰识别逻辑）。

此前方案无效的原因 #

• autocomplete="off"：Chrome目前会忽略多数场景下的off设置，优先遵循字段的语义标识。
• 单独设置autocomplete="username"在邮箱字段：未结合email属性明确字段类型，导致Chrome识别不准确。
• 将显示名字段移出表单：属于hack手段，可能破坏表单整体逻辑与用户体验。

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