- Add
autocomplete="off"
onto<form>
element; - Add hidden
<input>
withautocomplete="false"
as a first children element of the form.
<form autocomplete="off" method="post" action="">
<input autocomplete="false" name="hidden" type="text" style="display:none;">
...
This formation is going to prevent Chrome and Firefox to offer autofill and autocomplete for all input fields inside the form.
Strap in, this is a huge pain, but I figured out what's happening!
Apparently Chrome is using the label AND the id AND the name to help determine what to autofill. And I think it fills it if it finds a keyword in either of the two.
If your control name/id is "blah" and your label is "Username" - Chrome autofills
If your control name/id is "blah" and your label is "Usernaasme" - Chrome autofills (I think its looking for the word 'user')
If your control name/id is "blah" and your label is "Usasername" - Chrome doesnt autofill
If your control name/id is "username" and your label is "Usasername" - Chrome autofills
So it seems that both the label/id/name of the inputs need to not include the special words that Google is looking for.
I hope this saves someone else the hours it took me.