javascript - 浏览器登录自动完成

Question

我已经实现了用户可以拥有不同帐户类型的网站的登录，例如:

类型 A(默认)

Username: characters and numbers
Password: characters and numbers

B型(序列号)

Username: only numbers, min 10
Password: characters and numbers

当用户来到登录表单时，首先允许他/她选择他们想要使用的登录类型，然后他们继续进行实际登录。

问题前提条件
用户启用了 native Offer to save passwords 并保存了 Type A 和 Type B 凭据以登录，然后注销并最终尝试再次登录。

“问题”:
当用户选择Type A登录时，将关注浏览器建议预填字段的用户名，但是Type A和类型 B 将由浏览器建议。

问题
有没有办法在保存凭据时以某种方式标记凭据，以便下次浏览器仅建议相应的凭据。

P.S:欢迎任何其他可能的解决方案或有值(value)的信息 :)

更新 检查规范后:
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

我添加了 autocomplete="section-uniqueGroupName" 并确保 name 和 id 是唯一的。

使用用户名登录

<form>
<input type="text" name="login-userName" id="login-userName" autocomplete="section-userName">
<input type="password" name="password-userName" id="password-userName" autocomplete="section-userName>
<button type="submit">Submit</button>
</form>

使用卡号登录

<form>
<input type="text" name="login-serviceCard" id="login-serviceCard" autocomplete="section-serviceCard">
<input type="password" name="password-serviceCard" id="password-serviceCard" autocomplete="section-serviceCard>
<button type="submit">Submit</button>
</form>

但似乎仍然没有成功...

所以调查仍在继续，这让我想知道是否真的可以仅使用 native 方法 html 属性 而不涉及 JS 实现以下目标:
1. 按登录类型分离用户凭据
2. 并且(或至少)自动填充所选登录类型的最后使用凭据

如果它确实可行并且网络上有一个活生生的例子，那么能够看看将不胜感激:bowing:

Answer 1

最简单可行的解决方案是确保输入的名称不同。例如:

input {
  width: 200px;
  display: block;
}

form,
input {
  margin-bottom: 5px;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

<form action="javascript:void()">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="Login" />
</form>

<form action="javascript:void()">
  <input type="number" name="susername" pattern="\d{10,}" />
  <input type="password" name="spassword" />
  <input type="submit" value="Login" />
</form>

浏览器应该通过名称来识别输入，给它们不同的名称应该可以解决冲突。