[DOM] Input elements should have autocomplete attributes

avatar
Borislav Hadzhiev

Last updated: Jun 4, 2023
4 min

banner

# Table of Contents

  1. [DOM] Input elements should have autocomplete attributes
  2. Input elements should have autocomplete attributes (suggested: "username")

# [DOM] Input elements should have autocomplete attributes

The warning "[DOM] Input elements should have autocomplete attributes" occurs when you forget to set the autocomplete attribute on an input type password to on.

To solve the error, set the attribute to on so that the browser can remember the password and assist the user the next time they log in.

input elements should have autocomplete attributes

Here is an example of how the warning occurs.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <h2>bobbyhadz.com</h2> <form> <input type="password" id="password" name="password" /> <button id="btn">Click</button> </form> </body> </html>

You can open your terminal in the same folder as the index.html page and run the following command to start a development server.

shell
npx serve .

If I open the Console tab in my developer tools, I can see the following warning.

shell
[DOM] Input elements should have autocomplete attributes (suggested: "new-password"): (More info: https://goo.gl/9p2vKq) <input type="password" id="password" name="password">

The warning is shown because we haven't set the autocomplete attribute on the input field that has a type of password.

To resolve the issue, set the autocomplete attribute.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <h2>bobbyhadz.com</h2> <form> <input type="password" id="password" name="password" autocomplete="on" /> <button id="btn">Click</button> </form> </body> </html>

Notice that we set the autocomplete attribute to on on the input type password field.

index.html
<input type="password" id="password" name="password" autocomplete="on" />

Note that if you use React.js, the autocomplete attribute becomes autoComplete.

App.js
<input type="password" id="password" name="password" autoComplete="on" />

Make sure your input type password field is wrapped in a form element, otherwise, you'd get the following warning:

shell
[DOM] Password field is not contained in a form: (More info: https://goo.gl/9p2vKq) <input type="password" id="password" name="password" autocomplete="on">

The autocomplete attribute lets you specify what permissions the user agent has to provide automated assistance in filling out form field values.

Modern browsers such as Chrome, Firefox and Safari implement integrated password management.

When a user enters a username and a password for a site or registers, the browser offers to remember the credentials for the user.

The next time the user visits the site, the browser auto-fills the login fields with the stored values.

Modern browsers also enable you to choose a master password that the browser will use to encrypt the stored login credentials.

When the autocomplete attribute is set to on, users don't have to remember the passwords that are stored in the browser and can come up with longer, stronger passwords.

index.html
<input type="password" id="password" name="password" autocomplete="on" />

If you want to turn off autocompletion, you can try setting the autocomplete attribute to off.

However, this doesn't prevent most browsers from using their password management functionality.

index.html
<input type="password" id="password" name="password" autocomplete="off" />

When the autocomplete attribute is set to off, the browser is not allowed to automatically enter or select a value for the given field.

However, in most modern browsers, setting autocomplete to off on an input field with a type of password won't prevent the browser's password manager from asking the user if they want to save their login credentials or from automatically filling in the stored values.

In other words, most modern browsers don't support autocomplete="off" for password fields.

If you need to define a user management page or an admin dashboard where a user can specify a new password for another person and want to prevent auto-filling of password fields, set autocomplete="new-password".

index.html
<input type="password" id="password" name="password" autocomplete="new-password" />

Modern browsers usually don't autofill an input element that has its autocomplete attribute set to new-password.

Some browsers might suggest a secure autogenerated password for the field, but they won't autofill a saved password.

You can also try setting the autocomplete attribute to current-password if new-password didn't work.

index.html
<input type="password" id="password" name="password" autocomplete="current-password" />

# Input elements should have autocomplete attributes (suggested: "username")

You might also get the following warning when working with password input fields:

shell
[DOM] Input elements should have autocomplete attributes (suggested: "username"): (More info: https://goo.gl/9p2vKq) <input type="text" id="username" name="username">

If you get the warning, try to set the autocomplete property on your username input field to username email.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <h2>bobbyhadz.com</h2> <form> <input type="text" id="username" name="username email" autocomplete="username email" /> <input type="password" id="password" name="password" autocomplete="new-password" /> <button id="btn">Click</button> </form> </body> </html>

The username autocomplete value is used to specify a username or account name.

index.html
<input type="text" id="username" name="username email" autocomplete="username email" />

The email value is used to specify an email address.

If your form doesn't need a username field, hide it by setting the CSS display property to none.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <h2>bobbyhadz.com</h2> <input type="text" id="username" name="username email" autocomplete="username email" style="display: none" value="YOUR_VALUE" /> <input type="password" id="password" name="password" autocomplete="new-password" /> <button id="btn">Click</button> </body> </html>

Notice that we set the display CSS property to none on the input field to hide it.

index.html
<input type="text" id="username" name="username email" autocomplete="username email" style="display: none" value="YOUR_VALUE" />

If you need to set a value for the input field, set the value property, otherwise, you can remove it.

index.html
<input type="text" id="username" name="username email" autocomplete="username email" style="display: none" />

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.