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 is less than 3 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"