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

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!

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.

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)