Tip: Adding autocomplete to a password field

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.

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Tips & Tricks

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

    Collection · 53 snippets

  • Common HTTP status codes Cheat Sheet

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

    Webdev · Jun 12, 2021

  • Bash Shortcuts Cheat Sheet

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

    Webdev · Jun 12, 2021

  • DNS Record Basics

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

    Webdev · Jan 9, 2022