Disabling autocomplete on form inputs with HTML (also Chrome)

Many people are struggling to disable autocomplete on their forms – especially in Chrome. For some reason, Chrome is very stubborn and tries to autocomplete fields no matter what. Usual tricks, such as autocomplete="off" will not work.

The only solution that worked for me for both Chrome and Firefox consists of following steps:

• Change your form fields names, so that they differ from the standard words, such as email, password, address, and so one.
• To keep the ability to autofill fields after clicking on them, add autocomplete property and set it to the value of input’s type
• Set autocomplete=”new-password” property on your password field.

The first of the three steps will make sure that your browser does not recognize this field as a standard form field. Instead, it will consider it a custom field and will not try to populate it, as it does not know for sure what value should be put in.

The second step will help the browser a little in recognizing the format of autofill value. Above, we tried to confuse the browser, but we still want to be able to autofill values after clicking on the specific input. To let browser know what value goes in it, we specify the autocomplete property.

The third step tells our browser that the value coming in to the password field cannot be pre-filled. It has to be a new value that differs from whatever would normally be autocompleted.

And voilà, we now have empty fields on page load, but we’re still able to autofill them after clicking on them. 🙂

<form>
    <input type="email" name="fem" autoComplete="email" />
    <input type="password" name="fpass" autocomplete="new-password" />
</form>

Let me know in the comment section below if this solution worked for you.