浏览器登录自动完成

Question

我已经为网站实现了登录，用户可以在其中使用不同的帐户类型，例如：

A型（默认）

Username: characters and numbers
Password: characters and numbers

B型（序列号）

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

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

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

“问题”：
当用户选择Type A登录时，将专注于浏览器建议预填该字段的用户名，但是Type A和Type B都将由浏览器建议

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

附言：然后，欢迎其他任何可能的解决方案或有价值的信息:)

更新 检查规格后：
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>

但是似乎并没有成功...

因此调查仍在继续，这使我想知道是否仅使用本机方法html attributes而不涉及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>

浏览器应通过输入名称来标识输入，为它们提供不同的名称应可以解决冲突。

Answer 2

如果您对A型和B型输入的命名不同，浏览器将知道这是一个不同的输入，并会根据用户选择的输入给出建议。

Answer 3

选择一个选项后，您还可以仅通过JavaScript将表单类型A或B添加到文档DOM。

Answer 4

我认为自动填充功能考虑了HTML表单中的位置。

因此，我建议您将两者都添加到表单中，并且一次只显示一个。

例如：

<form>
<input type="text" name="lgn-userName" id="login-userName" style="display:none">
<input type="text" name="lgn-serviceCard" id="login-serviceCard">
<input type="password" name="password" id="password">
<button type="submit">Submit</button>
</form>

请注意，如果您在“第一个”（也是唯一的）输入中键入了许多不同的登录名，则可以使用此技巧在第一个输入中获得建议。 （至少以相同的形式）