Browser login autocomplete

Question

I've implemented the login for the website where the user can have different account types for example:

Type A (default)

Username: characters and numbers
Password: characters and numbers

Type B (serial number)

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

When the user comes to the login form, first he/she is allowed to selected what type of login they want to use and then they proceed to the actual login.

Problem preconditions
The user has native Offer to save passwords enabled and have saved both Type A and Type B credentials to login, then logged out and eventually attempts to log in once again.

The "problem":
When the user will select Type A to login, will focus on the username the browser will suggest to prefil the field, but both Type A and Type B will be suggested by the browser.

The Question
Is there a way to somehow tag the credentials at the point of time when they are saved so next time the browser will suggest only corresponding credentials.

P.S: Any other possible solution or valuable information is more then welcome :)

UPDATE After inspecting the specs:
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

I've added autocomplete="section-uniqueGroupName" and made sure that the name and id are unique.

Login with username

<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>

Login with card number

<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>

But still it doesn't seem to make the trick...

So the investigation continues and it makes me wonder if it is actually possible using only native approach html attributes without involving the JS achieve the following:
1. Separate user credentials by type of login
2. And (or at least) Autofill the last used credentials of selected type of login

If it's actually possible and there is an alive example on a web it will be much appreciated to be able to have a look :bowing:

Answer 1

The easiest solution that should work is to make sure that the names of the inputs are different. For example:

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>

The browser should identify the inputs by their names, giving them different names should resolve the conflict.