Tip: Adding autocomplete to a password field

Angelos Chalaris · Webdev · Jun 12, 2021

The HTML autocomplete attribute provides a wide variety of options for <input> fields. One of these is the new-password value, which can be used when the user is asked to create a new password (e.g. signup or reset password forms). This value ensures that the browser will not accidentally fill in an existing password, while it also allows the browser to suggest a secure password:

<form action="signup" method="post">
  <input type="text" autocomplete="username">
  <input type="password" autocomplete="new-password">
  <input type="submit" value="Sign up">
</form>

Additionally, if the form contains a second password field asking the user to retype the newly created password, autocomplete="new-password" should be used for both of the password fields.

Recommended snippets & collections

  • Tips & Tricks

    Snippet collection

    A collection of quick tips and tricks to level up your coding skills one step at a time.

  • Maximize your productivity when working with a bash or other shell terminal by using these keyboard shortcuts.

  • Familiarize yourself with the most common HTTP status codes with this handy cheatsheet.

  • DNS records may not be a thing you work too often with. Regardless, some basic knowledge can go a long way.