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.

Absolutely nothing worked for me with Chrome on OSX. Nothing on this earth can stop it putting a username in an email field on a form it has never seen before.

Why is this still so hard to control in 2019 - what the heck Google?!

None of the options on this page worked for me. I even tried changing the value to:

autoComplete="Chrome, stop autofilling. You don't know better than me. Why have you made this hard?"

This works for now, but I'm sure Google will make it needlessly hard again in a few weeks:

<input style={{ position: 'fixed', left: -1000 }} type="text" name="username" id="username" />
<input style={{ position: 'fixed', left: -1000 }} type="password" name="password" id="password" />

This unfortunately leaves these items in the tab progression, which is not great for accessibility, and demonstrates how Google's attempts to override my decisions as the app developer is counter productive. This should be a simple switch. I want it off.

The only way that worked for me. Thank you!

Just a note here, I used left: -1000px.
I created a CSS class for this:

.autocomplete-off {
  position: fixed !important;
  opacity: 0 !important;
  top: -1000px !important;
  left: -1000px !important;
  height: 0 !important;
  width: 0 !important;
  border: 0 !important;
}

@zmitic solutions works

The suggested

... its still works for me anyone from 2024

I used combogrid from easyui and I'm trying to off the autocomplete it's not working
<input autocomplete="off" id="comboGrid{{i}}" name="ordertext{{i}}" [formControlName]="prop.fieldid" name="comboGrid" width="auto" >

autocomplete="new-password" disables autofill for me

Saved me!

role="presentation" autocomplete="off"

working

                                                    </div>
                                                    <div class="style-458">
                                                        <label for="Password" class="style-459">Password</label>
                                                        <div class="style-460">
                                                            <input type="password" class="style-461" name="Password" autocomplete="off" value="" encode="1" /> <span class="style-462">Length: 0 ~ 64</span> <input type="password" name="FakePasPassword" autocomplete="off" tabindex="-1" class="style-463" />

Version 113.0.5672.126 (Official Build) (64-bit)

if input has type "password" then Chrome !completely! ignores attribute autocomplete="off".

• values like abc/new-password don't help
• different input's id and name don't help
• on form and concrete input behavior is the same

it is drastically annoying since 2015, where similar ticket was created (https://issues.chromium.org/issues/41163264?pli=1). 9!!! years passed.
google, is it you?

The only thing that consistently works for me is disabling the password field until clicked.

For now, I am doing a hacky solution to just delay/prevent the autofill styles from updating. Not 100% perfect as my font size still gets affected but I can settle with this.

:-webkit-autofill {
    transition: all 100000s ease-in-out 0s;
  }

autocomplete="new-password" working for only autofill, i need to stop the suggestions names, autocomplete="off" doesn't work for me

@zmitic 's solution does not seem to work for MS Edge ver 122.0.2365.59. I would assume that the solution should work for both Edge & Chrome

There is no consistent solution for this. Please rather comment on this to push the devs to do something about it https://issues.chromium.org/issues/41163264?pli=1

There is no consistent solution for this. Please rather comment on this to push the devs to do something about it https://issues.chromium.org/issues/41163264?pli=1

That one is closed as "Won't fix". Here's an issue that is still open: https://issues.chromium.org/issues/40910184

Thanks @alexchexes! Hopefully that one gains more traction. My use case is also a location input

@moosefaceee Nah, it's been almost a year since it was opened, and there's been no movement since then. It seems like they don't care much, and some issues may remain in that status for years. You could drop a comment there, too; maybe more comments will help somehow.

@BharathKiranRevu @przestudent @alexchexes @moosefaceee see this https://gist.github.com/eduardo-mior/ad14cab17fb5ab641812bff622534353 random name and random autocomplete props is a solution

@eduardo-mior thats a hack not a solution, I need the use the name attribute as a name attribute

You can try these steps one by one, I'm not sure which one suits your condition.

• add this attr autocomplete="new-password" to your input.
• remove attr name
• change autocomplete attr's value to autocomplete="new" (Tested in some latest version of browser)

@moosefaceee You can have an attribute called "x-original-name" to save the original "name" and change the "name" to a random value.

For those who stumbled here like I did many times, this works (at least for now):

<input role="presentation" autocomplete="off" />

You don't need to delete ID or have dynamic names.

most clean solution!

For those who stumbled here like I did many times, this works (at least for now):

<input role="presentation" autocomplete="off" />

You don't need to delete ID or have dynamic names.

most clean solution!

Just FYI: role presentation will hide the input from screen readers. Making your form inaccessible. :\

Yip, @graphical-iain, just another hack attempt.

@johan44co, rather go comment here https://issues.chromium.org/issues/40910184.

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" />

I tested everything that was suggested here, and the only thing that really worked was applying the autocomplete="off" to the form wrapping the fields. I won't allow the browser to autocomplete. And if you don't have the <form>, you must add it like this:

<form autoComplete='off'>

Applying only to the fields did not work for me.

This works for me on fresh Chrome v. 122.0 (more info here)

<input autocomplete="nope" ... />

(I test it in my angular dropdown component - works also without <form> wrapper)

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>