How to Disable Browser Autocomplete and AutoFill

Most web browsers automatically remember and save the information entered by users during form submission on various websites. They even offer to autocomplete, that is, offer suggestions based on partial user input. They also offer autofill, that is, pre-populate form fields based on previous values users have entered. But sometimes web developers and organizations may want to disable browser autocomplete and autofill. In this article, we will learn how to do this.

Why Disable Browser AutoComplete and AutoFill

AutoComplete and AutoFill are very convenient to those who do not want to manually type all input values on website forms. They are also helpful if you have long email address and password that you do not want to enter every time. Web browsers will automatically fill out these values and you do not have to remember them or manually enter them in front of anyone else. But if you are worried about data privacy or your form requires one time inputs such as one-time password then these features may not be of much use to you. In such cases, it is better to disable browser autocomplete and autofill.

How to Disable Browser Autocomplete and AutoFill

Let us look at how to turn off autocomplete and autofill.

Disable Autocomplete

You can disable autocomplete feature for your website by setting autocomplete attribute to off. You can mention it for form tag, to disable autocomplete for all HTML inputs in that form. Alternatively, you can do it for a specific inputs, if you want to disable autocomplete only for specific inputs. Here is its syntax.

autocomplete = 'off'

Here is an example to disable autocomplete for a form.

<form method="post" action="/form" autocomplete="off">
  …
</form>

Here is an example to turn off autocomplete only for one input field, in a form.

<form method="post" action="/form">
  …
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" autocomplete="off" />
  </div>
</form>

This will do 2 things:

1. It will tell web browser not to save the user input data for autocompletion later. However, some browsers may still offer suggestions.
2. It also prevents browser from saving form data in session history. This will prevent suggestions in case the user submits the form and then clicks back button to go back to the form page.

Please note, some of the modern web browsers such as Chrome, Edge, Firefox may ignore autocomplete attribute, and still offer autocompletion.

In such cases, you may have to try one of the following methods to see which one works for you.

You can try changing the name attribute of the input element.

For password input elements, you can simply set autocomplete to ‘new-password’.

If you want to disable autocomplete for multiple input fields in a single form, then set autocomplete attribute for form element as ‘off’. Next, assign a unique text to autocomplete attribute of each input in the form. Here is an example to demonstrate it.

<form id='my_form' autocomplete='off'>
...
<input type="text" id="username" autocomplete="input1" />
<input type="text" id="email" autocomplete="input2" />
<input type="text" id="phone" autocomplete="input3" />
...
</form>

In the above code, we have assigned unique texts input1, input2, input3 for each of the inputs where we want to turn off autocomplete. You can use any text such as skjfd, dljdl, ddjfldf. It doesn’t have to mean anything. It just needs to be unique that’s all.

Disable Autofill

Most web browsers offer to remember username and password entered by users the first time. When the user visits the same site again, browser will autofill the form inputs. They even ask user to enter another master password used to encrypt all this saved user data. This is convenient for most users since they do not have to remember passwords and so they can use really long and complicated ones.

So, many browsers may not support disabling autocomplete attribute in HTML. If the website form contains username and password fields, and the user has previously agreed to autofill the form, then browser will do so, even if autocomplete attribute is turned off on the input element.

The same holds true for username and password input elements. Even if you set autocomplete attribute of these fields to off, still the browser will offer to remember them. If the user agrees, then browser will autofill these fields on the next visit.

In such cases, you may want to try setting autocomplete attribute to a unique string, as mentioned above.

Conclusion

In this article, we have learnt several simple ways to easily turn off autocomplete and autofill in web browser. You an use any of these methods, depending on your requirements. Please note, web browser are regularly updated, especially to prevent such work arounds and some of these solutions may not be supported in future. Nevertheless, you can use them as long as they work.

Also read:

Difference Between Var and Let in JavaScript
How to Disable/Enable Input in jQuery
How to Disable Resizable Property of TextArea