HTML/CSS Trick: How to Turn Off Auto-Complete

Sometimes you need to turn off autocomplete in forms for a good user experience.

If you have a web app with forms that come up on a regular basis, for example if you're entering blog posts, you don't want the inputs to have auto-complete turned on because it is annoying.

by Scot Ranney

Autocomplete is useful to the point that I don't know where I'd be if I couldn't enter my entire identity into a web form in one click. I start typing "Sco" and everything from my birth date to mother's maiden name is ready to automatically populate a form.

This is great until you have a web app that asks people to fill in the same form many times, for example in a forum or blog system. Having auto-complete turned on makes it an eyesore when ten past titles show up as possible entries.

Turning auto-complete off is easy and anyone can do it.

When you have an input field, add autocomplete="off" to it, like this:

<input name="q" type="text" autocomplete="off">

You can also disable autocomplete for an entire form by turning it off at the top form level like this:

<form autocomplete="off" action="...">

There is no straight up CSS method of turning autocomplete off so this is the next best thing.

Update July 2020: Autocomplete="nope"

Turns out Chrome (at least Chrome Canary) seems to ignore everything at this point, however you can put an invalid switch such as "nope" in there and it does appear to work:

<input name="q" type="text" autocomplete="nope">

Update June 2019: Autocomplete="new-password"

In some cases Chrome will ignore the autocomplete settings above, especially for password fields. However at this time you can use a different autocomplete setting to get the same effect in password, text, and possibly other inputs:

<input name="q" type="text" autocomplete="new-password">

Autocomplete="false"

Some people have said that autocomplete="off" doesn't work for them but that autocomplete="false" does. Try this if you fall into that category:

<input name="q" type="text" autocomplete="false">

------------------------

As a side note, you can also turn off auto-correct and auto-capitalization like this:

<input type="text" name="some_name" autocorrect="off"></input>

<input type="text" name="some_name" autocapitalize="off"></input>

Advanced Method 1: Random IDs

This method sort of uses CSS to turn autocomplete off and it requires you to programatically have a unique/random ID for each of your form fields. Note that it doesn't work all that often and I personally never use this method.

<input id="xyxyx" name="q" type="text">
<input id="ababa" name="q" type="text">

Advanced Method 2: Javascript

Some will say that using autocomplete="off" isn't valid HTML and in a strict sense they are correct. To get around this you can put some javascript at the foot of your document. This is often ignored by Chrome.

if (document.getElementsByTagName) {
var inputElements = document.getElementsByTagName("input");
for (i=0; inputElements[i]; i++) {
if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
inputElements[i].setAttribute("autocomplete","off");
}
}
}

Another javascript method that uses jQuery (I like this method because of how clean and obvious it is). This will disable autocomplete for any input field on the page:

<script>
$(document).ready(function(){
$(':input').live('focus',function(){
$(this).attr('autocomplete', 'off');
});
});
</script>

Another more global jQuery method that will disable autocomplete for any form on the page:

<script>
$('form').attr('autocomplete','off');
</script>

Example of this one in use:

<body>
<form action="somefile.mvc">
<input type="text" name="username">
<button type="submit">Submit Me!</button>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
$('form').attr('autocomplete','off');
</script>
</body>

Important Note:

If you copy/paste from these examples it's possible that you'll get some invisible HTML chars that cause errors, just be on the lookout if you see something strange in the page inspector or it doesn't work. I tried the code above, it works for me in the latest version of Chrome.

These articles might be interesting for you as well: