How to Disable Browser Autocomplete and Autofill on HTML Form and Input Fields?

When a user starts typing in an HTML form field, browsers, by default, enable the autocomplete feature. Numerous users let their browsers collect form data allowing using autocomplete in forms in the future. However, there will be situations that this can not work accurately, or you might prefer that users manually insert all the information in details. Moreover, there might be a privacy concern for users, so browsers can let users disable it.

Some data presented in forms, however, are either not important in the future (such as a one-time pin) or include confidential information (such as a specific government identification or security code for bank cards). As the author of a website, you might prefer the browser not to remember the values for that kind of fields, even though the autocomplete feature of the browser is enabled. This allows the browser to offer auto-completion (i.e., suggest possible completions for fields that the user has started typing in) or auto-fill (i.e., pre-populate on load specific fields).

How to Disable or Enable Autocomplete

To disable or enable autocomplete of text in forms, use the autocomplete attribute of <input> and <form> elements. This attribute contains two values:

  • on (specifies that autocomplete is enabled, this is the default value)
  • off (specifies that autocomplete is disabled)

This can be done in a <form> for a complete form or for specific <input> elements:

  1. Add autocomplete="off" onto the <form> element to disable autocomplete for the entire form.
  2. Add autocomplete="off" for a specific <input> element of the form.
The autocomplete attribute works with the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

Let’s see an example where the autocomplete for the whole form is set to "on" and only for a specific <input> is set to "off".

Fill the form and submit, then reload the page to see how the autocomplete works.
Note that autocomplete is "on" for the <form>, but "off" for the E-mail field.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input{
      margin:5px 0;
      padding:5px;
      }
    </style>
  </head>
  <body>
    <h2>Disabled autocomplete for the E-mail field</h2>
    <form autocomplete="on">
      <input type="text" name="fname" placeholder="Enter Name"><br>
      <input type="text" name="lname" placeholder="Enter Last Name"><br>
      <input type="email" name="email" placeholder="Enter E-mail" autocomplete="off"><br>
      <input type="submit">
    </form>
  </body>
</html>
</html>

Let’s see another example where autocomplete="off" is set for the whole form, and only one input field can be autofilled.

Note that autocomplete is "off" for the <form>, but "on" for the Last Name field.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input{
      margin:5px 0;
      padding:5px;
      }
    </style>
  </head>
  <body>
    <form autocomplete="off">
      <div>
        <input type="text" placeholder="First Name">
      </div>
      <div>
        <input type="text" id="lname" placeholder="Last Name" autocomplete="on">
      </div>
      <div>
        <input type="number" placeholder="Credit card number">
      </div>
      <input type="submit">
    </form>
  </body>
</html>

There are two effects of setting autocomplete="off " for your form fields:

  1. Tells the browser not to save user-input data on similar forms for later autocompletion, although browser-specific algorithms vary.
  2. Stops the browser from caching form data in the session history. When the data of the forms is stored in the session history, the information filled in by the user will be still displayed, even if the user has submitted the form and clicked the Back button to go back to the initial form page.

As many users wouldn’t like to remember passwords, modern browsers do not support the autocomplete="off " for login fields. For login fields there is no difference if autocomplete is disabled for <input> fields or <form> fields.

When a website sets autocomplete="off " for the <form> or <input> elements, and a username/password fields are included in it, the browser will still allow remembering these fields, and in the case that the user accepts, the browser will autofill the fields the next time the user visits that website.

In this way behave Firefox (since version 38), and Google Chrome (since version 34).

In the case, you are representing a user management page where a user can define a fresh password for a different user, and you don’t want autofill password fields, use autocomplete="new-password" therefore, this is a sign for browsers that they are not required to react to it.


Do you find this helpful?

Related articles