This article explains how a website can disable autocomplete for form fields.

By default, browsers remember information that the user submits through <input> fields on websites. This enables the browser to offer autocompletion (that is, suggest possible completions for fields that the user has started typing in) or autofill (that is, pre-populate certain fields upon load).

These features are usually enabled by default, but they can be a privacy concern for users, so browsers can let users disable them. However, some data submitted in forms are either not useful in the future (for example, a one-time pin) or contain sensitive information (for example, a unique government identifier or credit card security code). As website author, you might prefer that the browser not remember the values for such fields, even if the browser's autocomplete feature is enabled.

Disabling autocompletion

To disable autocompletion in forms, you can set the autocomplete attribute to "off":

autocomplete="off"

You can do this either for an entire form, or for specific input elements in a form:

<form method="post" action="/form" autocomplete="off">
[…]
</form>
<form method="post" action="/form">
  […]
  <div>
    <label for="cc">Credit card:</label>
    <input type="text" id="cc" name="cc" autocomplete="off">
  </div>
</form>

Setting autocomplete="off" on fields has two effects:

  • It tells the browser not to save data inputted by the user for later autocompletion on similar forms, though heuristics for complying vary by browser.
  • It stops the browser from caching form data in the session history. When form data is cached in session history, the information filled in by the user is shown in the case where the user has submitted the form and clicked the Back button to go back to the original form page.

In some cases, the browser will continue suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really enforcing non-autocompletion is to assign an invalid value to the attribute, for example:

autocomplete="nope"

Since this value is not a valid one for the autocomplete attribute, the browser has no way to match it, and stops trying to autocomplete the field.

The autocomplete attribute and login fields

Modern browsers implement integrated password management: when the user enters a username and password for a site, the browser offers to remember it for the user. When the user visits the site again, the browser autofills the login fields with the stored values.

Additionally, the browser enables the user to choose a master password that the browser will use to encrypt stored login details.

Even without a master password, in-browser password management is generally seen as a net gain for security. Since users do not have to remember passwords that the browser stores for them, they are able to choose stronger passwords than they would otherwise.

For this reason, many modern browsers do not support autocomplete="off" for login fields:

  • If a site sets autocomplete="off" for a <form>, and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.
  • If a site sets autocomplete="off" for username and password <input> fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.

This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).

If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete="new-password"; however, support for this value has not been implemented on Firefox.

Use jQuery disableAutoFill Plugin

This plugin will randomize input name attribute by default. It will restore back to original field name when submitting form. This is for preventing auto completion for all browsers (includes third-party auto-completeion extensions) not just for Google Chrome. 

URL: https://terrylinooo.github.io/jquery.disableAutoFill/