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:
- Add an autocomplete attribute with a value of
usernamefor usernames. - Add an
autocompleteattribute with a value ofcurrent-passwordfor the password field on a sign-in form. - Add an
autocompleteattribute with a value ofnew-passwordfor the password field on sign-up and change-password forms. - If you require the user to type their password twice during sign-up, add the
new-passwordautocompleteattribute 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
Sign-up Form Example
[gist https://gist.github.com/greenido/43c9fa8fcb609c5f2fc9]
Sign-in Form Example
[gist https://gist.github.com/greenido/133cedc35bae91ea87b7]
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.
