Chrome - Would you like to save this password? prompt getting incorrect value

Question

I have a form that allows users to request an account on a private website, but there is no Username field. Instead, the specs for this project call for the user entering their e-mail address and password/confirm password. There are also fields for the user to enter their state and country.

When the form is submitted, Chrome displays a prompt asking if the user would like to save the password, but it is displaying the value of the state field instead of the Email address field. (The Email address is the actual username of the account).

I understand that Chrome will traverse a form's fields until it finds a field with an id=password, then it will traverse backwards through the fields to find id=username. Since I do not have a field of id=username and Chrome doesn't relate to id=email, it appears to be using the field immediately prior to the id=password field for the username.

How can I force Chrome to use the field with id=email for the username?

<form action="POST" src="#">
    <input id="email" type="text" />
    <input id="state" type="text" />
    <input id="country" type="text" />
    <input id="password" type="password" />
    <input id="confirmpassword" type="password" />

    <input type="submit" value="Request Account" />
</form>

When submitted, the above form triggers Chrome's to prompt:

Would you like to save this password?

Iowa             ********

Note that 'Iowa' is whatever value is typed into id=state field, which of course is wrong.

It would be difficult at this point to change id=email to id=username. Is there an alternate way of doing this and keeping id=email?

Answer 1

There seems to be only one solution to this issue. Renaming id="email" to id="username" doesn't resolve the issue either. It seems like it doesn't matter about the id or the label, browsers use the field immediately preceding the id="password" field as the username and so I have moved the two fields together, like this:

<form action="POST" src="#">
    <input id="state" type="text" />
    <input id="country" type="text" />
    <input id="email" type="text" />
    <input id="password" type="password" />
    <input id="confirmpassword" type="password" />

    <input type="submit" value="Request Account" />
</form>

If anyone knows how I can specify the field used as username in the browser's save password prompt (regardless of form field positioning) I would appreciate the pointer!

Answer 2

Im running on the same issue here.figured out (Read somewhere else and tested) that in chrome and in chrome only you can set autocomplete="username" on the email field. And this will let the browser know what is the correct username field. However this only works for chrome, so Im not using this solution

Documentation:

• https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands
• https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete (it's valid html)

Answer 3

Guilherme's solution display: none did not work for me, so I applied the following CSS class on extra login field:

.Login--hidden {
  height: 1px;
  position: absolute;  
  top: -1px;
  left: 0;
  width: 1px;
}

I also had to add tabindex="-1" to the element, to take it out of the tab-flow.

Still not ideal.

Answer 4

I had the same problem. Solved putting a hidden field (with display:none) before password and loading it with the login field value:

<input id="login" type="text">
<input id="name" type="text">
<input id="browser-friendly-login-field-location" style="display:none">
<input id="password" type="password">
<input id="submit" type="submit" onclick="$('#browser-friendly-login-field-location').val($('#login').val());">