Password Forms That Browsers Love

There are two types of common forms that you see every day on (almost) every website: Sign-up and Sign-in. If you want to improve your users experience and allow them to fill these forms quickly and efficiently, this post is for you.

You can help ensure that browsers’ password management functionality can understand your site’s sign-up, sign-in. All it take is a ‘touch’ of a change for your password forms by enriching your HTML with a bit of metadata.

Here are the rules to follow:

1. Add an autocomplete attribute with a value of username for usernames.
2. Add an autocomplete attribute with a value of current-password for the password field on a sign-in form.
3. Add an autocomplete attribute with a value of new-password for the password field on sign-up and change-password forms.
4. If you require the user to type their password twice during sign-up, add the new-password autocomplete attribute on both fields.

Btw, 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.
Two Separate Forms example

[gist https://gist.github.com/greenido/db169c0bf52d05637fd1]

 

Sign-up Form Example

[gist https://gist.github.com/greenido/43c9fa8fcb609c5f2fc9]

 

Sign-in Form Example

[gist https://gist.github.com/greenido/133cedc35bae91ea87b7]

 

A live example

One more thing, if you want to read about how to improve your sign-up password form, this is a great post on the topic.

Rock on with better forms.

Advertisement