All Articles

How to enable user and password autocomplete suggestions

Apr 19, 2021

The HTML autocomplete provides automated assistance in filling out form field values. To ensure your HTML input element displays the right autofill suggestion, you need to set the right attribute for an input/select/textarea element.

It is also useful to indicate to the password managers installed on the browser which are the username and password fields, even when they are in different forms or pages.

These are some examples:

Login form

<input id="username-id" type="email" autocomplete="username"/>
<input id="pass-id" type="password" autocomplete="current-password"/>

Change Password form

<input id="old-pass-id" type="password" autocomplete="current-password"/>
<input id="new-pass-id" type="password" autocomplete="new-password"/>
<input id="confirm-new-pass-id" type="password" autocomplete="new-password"/>

Useful autocomplete values

  • off: disable autocomplete
  • name: expects the value to be a person’s full name
  • email: expects the value to be an email
  • username: a username or account name
  • current-password: user’s current password
  • new-password: used by the browser to avoid filling in an existing password and to offer assistance in creating a secure password