Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 981677 of How to Turn Off Form Autocompletion

  • Revision slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion
  • Revision title: How to Turn Off Form Autocompletion
  • Revision id: 981677
  • Created:
  • Creator: Delapouite
  • Is current revision? No
  • Comment add explanation on how to truly turn off completion by assigning a random string to the attribute.

Revision Content

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 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 this 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 this page.

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

Revision Source

<p><span class="seoSummary">This article explains how a website can disable autocomplete for form fields.</span></p>

<p>By default, browsers remember information the user submits through <code><a href="/en-US/docs/Web/HTML/Element/input">input</a></code> 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).</p>

<p>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.</p>

<h2 id="Disabling_autocompletion">Disabling autocompletion</h2>

<p>To disable autocompletion in forms, a website can set the {{htmlattrxref("autocomplete", "input")}} attribute to "off":</p>

<pre class="brush: html">
autocomplete="off"</pre>

<p>The site can either do that for an entire form, or for specific input elements in a form:</p>

<pre class="brush: html">
&lt;form method="post" action="/form" autocomplete="off"&gt;
[…]
&lt;/form&gt;</pre>

<pre class="brush: html">
&lt;form method="post" action="/form"&gt;
  […]
  &lt;div&gt;
    &lt;label for="cc"&gt;Credit card:&lt;/label&gt;
    &lt;input type="text" id="cc" name="cc" autocomplete="off"&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>Setting <code>autocomplete="off"</code> here has two effects:</p>

<ul>
 <li>it stops the browser saving field data for later autocompletion on similar forms though heuristics that vary by browser.</li>
 <li>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.</li>
</ul>

<p>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 <strong>assign&nbsp;a random string</strong> to the attribute like so :</p>

<pre class="brush: html">
autocomplete="nope"
</pre>

<p>Since this random value is not a {{htmlattrxref("autocomplete", "input", "valid one")}}, the browser will give up.</p>

<h2 id="The_autocomplete_attribute_and_login_fields">The autocomplete attribute and login fields</h2>

<p>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.</p>

<p>Additionally, the browser enables the user to choose a master password that the browser will use to encrypt stored logins.</p>

<p>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.</p>

<p>For this reason, many modern browsers do not support <code>autocomplete="off"</code> for login fields.</p>

<ul>
 <li>if a site sets <code>autocomplete="off"</code> for a <code><a href="/en-US/docs/Web/HTML/Element/form">form</a></code>, 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.</li>
 <li>if a site sets <code>autocomplete="off"</code> for username and password <code><a href="/en-US/docs/Web/HTML/Element/input">input</a></code> 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.</li>
</ul>

<p>This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).</p>
Revert to this revision