How to hint browsers to get the right username and password on a #login page? #chrome #firefox #safari #web #html

By Jun - Support me on Amazon

When you sign up, login or reset password on web browsers such as Google Chrome, Mozilla Firefox, Safari etc may prompt you to save your username and password. Sometimes, on some websites, they can't detect the right username.

How to make browsers know which username and password to save?

Use cases:

case 1: Username and Password input on the same page

Put username right above your password input to hint browsers about your username and password.
Username and Password on the same page on Google Chrome

Username and Password on the same page on Mozilla Firefox
Username and Password on the same page on Safari

You can try it yourself via CodePen - Login with username and password inputs.

case 2: Username and Password input on different pages (Email First) 

Hide username input using hidden css instead of disabled or hidden properties. 
Username First and Password on a different page on Google Chrome
Username First and Password on a different page on Mozilla Firefox
Username First and Password on a different page on Safari

You can try it yourself via CodePen - Login with username first and password inputs.

case 3: Reset Password Page

Use css to reverse the order of hidden username, password and verification input fields.
Reset Password Page with Username hidden on Google Chrome

Reset Password Page with Username hidden on Mozilla Firefox
Reset Password Page with Username hidden on Safari

Thanks to David Ford's reply on my Chromium-discuss thread, I found this solution using flex to reverse items' order.

In case you want to support older browsers, you can check out this StackOverflow - reverse the order of div's children thread on how to reverse the order of divs. 
Flex Availability on Browsers


Notes: 

1 Note that if you set the username input as hidden or disabled, Google Chrome Smart Lock will ignore the username.

2 On a Chromium Design Document, I found this useful information and also information about how to make browser saves the right username and password.
To make browers understand our signup, login and reset password pages, you can add metadata to the page html.

[The following text is copied from Chromium Design Document for your convenience]

You can help ensure that browsers' and extensions' password management functionality can understand your site's sign-up, sign-in and change-password forms by enriching your HTML with a dash of metadata. In particular:
1. Add an autocomplete attribute with a value of username for usernames.
2. If you've implemented an "email first" sign-in flow that separates the username and password into two separate forms, include a form field containing the username in the form used to collect the password. You can, of course, hide this field via CSS if that's appropriate for your layout.
3. Add an autocomplete attribute with a value of current-password for the password field on a sign-in form.
4. Add an autocomplete attribute with a value of new-password for the password field on sign-up and change-password forms.
5. If you require the user to type their password twice during sign-up or password update, add the new-password autocomplete attribute on both fields.

Example:
<style>
  div {
    margin: 3px;
  }

  label {
    display: inline-block;;
    width: 100px;
  }
</style>
<form>
  <div>
    <label>Email:</label>
    <input type='email' autocomplete='username' id='email'/>
  </div>
  <div>
    <label>Password:</label>
    <input type='password' autocomplete='new-password' />
  </div>
  <input type="submit" value="Login">
</form>


3 How to hint Google Smart Lock to use a specific input field as the username when there is an active input field above the hidden username input field StackOverflow thread

4 How to hint Google Smart Lock to use a specific input field as the username in a website StackOverflow thread

Thanks for reading!