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

user_3853655 0
Viewed 3592

I've been trying to search for some documentation on how to hint Google Smart Lock for Chrome to use a specific input field as the one associated with the username without any luck.

For the password it works perfectly as it is using type="password" but when it comes down to the username in a multi field form, where the username is not specified before the password or not as the first field in the form it picks another of the fields in the form as the username.

Does anyone have any clue on how to hint Google Smart Lock to use a specific input field as the username?

google-smartlockpasswords google-api html
3 Answers

You can use display: none css to hide a username input. The following code snippet is taken from Chromium design document. They discuss a few use cases there.

<style>
  #emailfield { display: none; }
</style>
<form id="login" action="login.php" method="post">
  <input id="emailfield" type="text" value="me@example.test" autocomplete="username">
  <input type="password" autocomplete="current-password">
  <input type="submit" value="Sign In!">
</form>

Check out this article that explains how to make it work on Chrome, Firefox and Safari for 3 different cases: normal login, username first login and reset password page with verification input first.

I have also made a CodePen where you can try it out.

user_50421690
Related