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 es 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 wele :)

UPDATE After inspecting the specs:
.html#autofill

I've added autoplete="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" autoplete="section-userName">
<input type="password" name="password-userName" id="password-userName" autoplete="section-userName>
<button type="submit">Submit</button>
</form>

Login with card number

<form>
<input type="text" name="login-serviceCard" id="login-serviceCard" autoplete="section-serviceCard">
<input type="password" name="password-serviceCard" id="password-serviceCard" autoplete="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:

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 es 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 wele :)

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

I've added autoplete="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" autoplete="section-userName">
<input type="password" name="password-userName" id="password-userName" autoplete="section-userName>
<button type="submit">Submit</button>
</form>

Login with card number

<form>
<input type="text" name="login-serviceCard" id="login-serviceCard" autoplete="section-serviceCard">
<input type="password" name="password-serviceCard" id="password-serviceCard" autoplete="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:

• javascript
• html
• forms
• browser
• autoplete

Share Improve this question Follow edited Feb 19, 2019 at 13:22 volna asked Jan 31, 2019 at 9:51 volnavolna 2,61044 gold badges3131 silver badges6868 bronze badges 2

• 2 Can you also post the html code of the inputs? – nick zoum Commented Jan 31, 2019 at 9:58
• 1 The standard says the autoplete values should be section-serviceCard username and section-serviceCard password, but chrome may not respect that as developers adopted to using random autoplete section for login forms on every page load to disable the autofill feature. – Munim Munna Commented Feb 19, 2019 at 14:39

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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.

If you name differently your Type A and Type B input, the browser will know it's a different input and will give suggestion according to the input selected by the user.

You can also add only Form Type A or B via JavaScript to the Document DOM after choosing one option.

I think the autofill takes into account the position in the HTML form.

So I suggest you to add them (both) in your form and to display only one at a time.

For example:

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

Just, be aware, if you typed a lot of different login in the "first" (and only) input, you will get the suggestions in the first input with this trick. (At least on the same form)