Автозаполнение входа в браузер

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 будутпредложено браузером.

Вопрос
Есть ли способ как-то пометить учетные данные в тот момент, когда они сохраняются, поэтому в следующий раз браузер предложит только соответствующие учетные данные.

PS: Любое другое возможное решение или ценная информация приветствуются :)

ОБНОВЛЕНИЕ После проверки технических характеристик:
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

Я думаю, что автозаполнение учитывает позицию в 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>

Просто имейте в виду, что если вы набрали много разных логинов в «первом» (и единственном) вводе, вы получите предложения в первомввод с помощью этого трюка.(Хотя бы в той же форме)

Answer 2

Самое простое решение, которое должно сработать, - убедиться, что имена входов различны.Например:

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 3

Вы также можете добавить только тип формы A или B через JavaScript в Document DOM после выбора одного из вариантов.

Answer 4

Если вы по-разному называете ввод типа A и типа B, браузер узнает, что это другой вход, и выдаст подсказку в соответствии с вводом, выбранным пользователем.