This article explains how a website can disable autocomplete for form fields.
By default, browsers remember information the user submits through input
fields on websites. This enables the browser to offer autocomplete (in which the browser offers the user suggestion completions for fields they have started typing in) or autofill (in which the browser pre-populates fields on load).
These features can be a privacy concern for users, so browsers enable users to disable them, but they are usually enabled by default. However, some data submitted in forms is either not useful in the future (e.g. a one-time pin) or is sensitive information (e.g. a unique government identifier or credit card security code). A website might prefer that the browser should not remember values for such fields, even if the browser's autocomplete feature is enabled.
Disabling autocompletion
To disable autocompletion in forms, a website can set the {{htmlattrxref("autocomplete", "input")}} attribute to "off":
autocomplete="off"
The site can either do that 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"
here has two effects:
- it stops the browser saving field data for later autocompletion on similar forms though heuristics that vary by browser.
- it stops the browser caching form data in session history. When form data is cached in session history, the information the user has filled in will be visible after the user has submitted the form and clicked on the Back button to go back to the original form page.
In some case, the browser will keep 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 force the no-completion is to assign a random string to the attribute like so :
autocomplete="nope"
Since this random value is not a {{htmlattrxref("autocomplete", "input", "valid one")}}, the browser will give up.
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 those 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 logins.
Even without a master password, in-browser password management is generally seen as a net gain for security. Since users don't 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 aform
, 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 this page. - if a site sets
autocomplete="off"
for username and passwordinput
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 this page.
This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).