Disabling Chrome Autofill
Jan 2021: autocomplete="off"
does work as expected now (tested on Chrome 88 macOS).
For this to work be sure to have your input tag within a Form tag
Sept 2020: autocomplete="chrome-off"
disables Chrome autofill.
Original answer, 2015:
For new Chrome versions you can just put autocomplete="new-password"
in your password field and that's it. I've checked it, works fine.
Got that tip from Chrome developer in this discussion: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7
P.S. Note that Chrome will attempt to infer autofill behavior from name, id and any text content it can get surrounding the field including labels and arbitrary text nodes. If there is a autocomplete token like street-address
in context, Chrome will autofill that as such. The heuristic can be quite confusing as it sometimes only trigger if there are additional fields in the form, or not if there are too few fields in the form. Also note that autocomplete="no"
will appear to work but autocomplete="off"
will not for historical reasons. autocomplete="no"
is you telling the browser that this field should be auto completed as a field called "no"
. If you generate unique random autocomplete
names you disable auto complete.
If your users have visited bad forms their autofill information may be corrupt. Having them manually go in and fix their autofill information in Chrome may be a necessary action from them to take.
I've just found that if you have a remembered username and password for a site, the current version of Chrome will autofill your username/email address into the field before any type=password
field. It does not care what the field is called - just assumes the field before password is going to be your username.
Old Solution
Just use <form autocomplete="off">
and it prevents the password prefilling as well as any kind of heuristic filling of fields based on assumptions a browser may make (which are often wrong). As opposed to using <input autocomplete="off">
which seems to be pretty much ignored by the password autofill (in Chrome that is, Firefox does obey it).
Updated Solution
Chrome now ignores <form autocomplete="off">
. Therefore my original workaround (which I had deleted) is now all the rage.
Simply create a couple of fields and make them hidden with "display:none". Example:
<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display: none" type="text" name="fakeusernameremembered" />
<input style="display: none" type="password" name="fakepasswordremembered" />
Then put your real fields underneath.
Remember to add the comment or other people on your team will wonder what you are doing!
Update March 2016
Just tested with latest Chrome - all good. This is a fairly old answer now but I want to just mention that our team has been using it for years now on dozens of projects. It still works great despite a few comments below. There are no problems with accessibility because the fields are display:none
meaning they don't get focus. As I mentioned you need to put them before your real fields.
If you are using javascript to modify your form, there is an extra trick you will need. Show the fake fields while you are manipulating the form and then hide them again a millisecond later.
Example code using jQuery (assuming you give your fake fields a class):
$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
}, 1);
Update July 2018
My solution no longer works so well since Chrome's anti-usability experts have been hard at work. But they've thrown us a bone in the form of:
<input type="password" name="whatever" autocomplete="new-password" />
This works and mostly solves the problem.
However, it does not work when you don't have a password field but only an email address. That can also be difficult to get it to stop going yellow and prefilling. The fake fields solution can be used to fix this.
In fact you sometimes need to drop in two lots of fake fields, and try them in different places. For example, I already had fake fields at the beginning of my form, but Chrome recently started prefilling my 'Email' field again - so then I doubled down and put in more fake fields just before the 'Email' field, and that fixed it. Removing either the first or second lot of the fields reverts to incorrect overzealous autofill.
Update Mar 2020
It is not clear if and when this solution still works. It appears to still work sometimes but not all the time.
In the comments below you will find a few hints. One just added by @anilyeni may be worth some more investigation:
As I noticed, autocomplete="off"
works on Chrome 80, if there are fewer than three elements in <form>
. I don't know what is the logic or where the related documentation about it.
Also this one from @dubrox may be relevant, although I have not tested it:
thanks a lot for the trick, but please update the answer, as display:none;
doesn't work anymore, but position: fixed;top:-100px;left:-100px; width:5px;
does :)
Update APRIL 2020
Special value for chrome for this attribute is doing the job: (tested on input - but not by me)
autocomplete="chrome-off"