Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save niksumeiko/360164708c3b326bd1c8 to your computer and use it in GitHub Desktop.
Save niksumeiko/360164708c3b326bd1c8 to your computer and use it in GitHub Desktop.
Disable HTML form input autocomplete and autofill

Disable HTML Form Input Autocomplete and Autofill

  1. Add autocomplete="off" onto <form> element;
  2. Add hidden <input> with autocomplete="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.

@wagnerlanger
Copy link

wagnerlanger commented May 21, 2024

What works in Chrome is the following:

<input type="text" autocomplete="new-text" />
<input type="number" autocomplete="new-number" />
<input type="password" autocomplete="new-password" />

this worked!
Also i have thw autocomplete="off" on the form field

@StevenHachel
Copy link

This still working fine for me

<form autocomplete="off">
  <input type="text" name="username" autocomplete="off" />
  <!--OR-->
  <input type="text" name="email" autocomplete="off" />
  
  <input type="password" name="password" autocomplete="new-password" />
</form>

Best solution so far, worked great for me. Thx!

@usamamuneerchaudhary
Copy link

usamamuneerchaudhary commented Jun 4, 2024

none of the above works for me :(

@RNutley
Copy link

RNutley commented Jun 6, 2024

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.

@leoDroidsmile
Copy link

If you are using a stand alone <input> element, I've found that setting autocomplete="off, no, nope, false, blah, blah, whatever" does not work.

However, <input autocomplete="off"> will work if nested inside a <form> element.

I may be off on this... but this is what worked for me after testing many of the suggested solutions posted here.

It works, thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment