Create Amazing Password Forms
of filling out forms as convenient to users as possible, to save time and frustration. However good they are at interpreting web pages, however, there are always a few things you, as a web developer, can make sure to do, to ensure the best experience for your users, by making your web pages accessible.
Make sure that each authentication process (registration, login or change password) is grouped together in a single <form> element. Don’t combine multiple processes (like registration and login), or skip the <form> element.
Autocomplete attributes help password managers to infer the purpose of a field in a form, saving them from accidentally saving or autofilling the wrong data. A little annotation can go a long way: some common values for text fields are “username”, “current-password” (login forms and change password forms) and “new-password” (registration and change password forms). See a detailed write-up with examples.
Fields that are not passwords, but should be obscured, such as credit card numbers, may also have a type="password" attribute, but should contain the relevant autocomplete attribute, such as "cc-number" or "cc-csc".
Password managers need some indication that a form has been submitted. Try to make sure your web page does one of the following on form submission:
## **Performs a navigation to another page.** ## **Emulates a navigation with [History.pushState or History.replaceState](https://developer.mozilla.org/en-US/docs/Web/API/History_API), and removes the password form completely.**