Disable HTML form input autocomplete and autofill

disable-html-form-input-autocomplete-autofill.md

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.

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>

<input autocomplete="new-password" />

This is the way. Here is why.

Atrocious.

You can try this...

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

<input type="text" required autofocus aria-autocomplete="none">

<input type="text" required aria-autocomplete="none">

</form>

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

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!

none of the above works for me :(

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.

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

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.

Interesting find. Thank you. I have been struggling with this for a long time.

If the requirement is to prevent form auto-filling, the following solutions are effective for me. ( chrome : 126.0.6478.127, Firefox: 127.0.2)

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

For input type=‘text’, autocomplete="off" works,
For input type=‘password’, autocomplete="new-password" works.

But I want to disable password suggestions, the above solutions do not work. In the end, Instead of using a regular password input field, I used a text input field. When entering, it converts plaintext into ••• while storing the actual input .

autocomplete="nope" is the answer

I am new here, Can I ask a question?

What worked for me in chrome was removing the word "address" in my placeholder. Sad, but it works. This is very annoying and bad UX for address finders because the user have to select a choice from the drop down and not the browser drop-down pre-selections !

I use JS to clear any prefilled field value after a small delay on page load:

setTimeout( function () {
	$("#UserModel_password, #UserModel_passwordConfirm").val("");
}, 3000 );

Just wanted to chime in here for those of you who want to remove the email autofill as well;

Create an SVG for your Email label text instead of using actual text.
Change the label to 'Nope' and basically just hide it with z-index and absolute positioning.
Set Input type, name and autoComplete to 'Nope'.

          <div className="mb-4">
            <svg width="40" height="28" xmlns="http://www.w3.org/2000/svg">
              <text x="0" y="16" fontSize="14" fill="white" fontWeight="bold">
                Email:
              </text>
            </svg>
            <label className="absolute -z-10">Nope</label>
            <input
              type="nope"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              name="nope"
              autoComplete="nope"
              required
              className="w-full rounded-lg border px-3 py-2 shadow-sm focus:outline-none focus:ring focus:ring-blue-200"
            />
          </div>

This works for me in my React project, testing on the latest Chrome browser.

Thank you! You saved me so much time

If you want a true fix, please go mark as impacted here. This needs attention from the Chromium dev team.

Everything in this thread is a hack to work around it, and is likely to break or cause bugs in your application down the line. Better to get it fixed at the source, no?

These workarounds are also be very misleading for Jnr developers. :(

This still working in Chrome:
Using a non-standard value may trick the browser into not automatically filling in the field.

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

Hi @valentimmx, please also drop your comment here: https://issues.chromium.org/issues/40910184?pli=1

Mark yourself as impacted. This needs attention from the Chromium dev team for a proper fix.

I hope this could be helpful for someone:
form structure:

• name
• email
• phone
• billing address // <== I had a problem here, where it was auto-suggesting email address autocomplete
• password

I tried all of the above but with no luck, then
when I change the form to:

• name
• email
• password // moved it up
• phone
• billing address // <== auto suggestions stoped 🫨

chrome 128.0.6613.138

None of these works for me. Feels like you have to hack it up by adding read only and later remove after rendering the component. This is stupid....

Couldn’t agree more @tlevivsoft, would you mind sharing your frustrations with the Chromium team here? https://issues.chromium.org/issues/40910184?pli=1

Better yet, mark yourself as affected. More traction we can get on the ticket the better.

@rawaby88 you too if you’re open to it please