Disable HTML Form Input Autocomplete And Autofill - GitHub Gist

Skip to content Search Gists Search Gists All gists Back to GitHub Sign in Sign up Sign in Sign up Dismiss alert {{ message }}

Instantly share code, notes, and snippets.

niksumeiko/disable-html-form-input-autocomplete-autofill.md Last active November 26, 2025 15:46 Show Gist options

• Download ZIP

• Star 226 (226) You must be signed in to star a gist
• Fork 41 (41) You must be signed in to fork a gist

• Embed Select an option
  • Embed Embed this gist in your website.
  • Share Copy sharable link for this gist.
  • Clone via HTTPS Clone using the web URL.

  No results found

  Learn more about clone URLs Clone this repository at <script src="https://gist.github.com/niksumeiko/360164708c3b326bd1c8.js"></script>
• Save niksumeiko/360164708c3b326bd1c8 to your computer and use it in GitHub Desktop.

Code Revisions 2 Stars 225 Forks 41 Embed Select an option

• Embed Embed this gist in your website.
• Share Copy sharable link for this gist.
• Clone via HTTPS Clone using the web URL.

No results found

Learn more about clone URLs Clone this repository at <script src="https://gist.github.com/niksumeiko/360164708c3b326bd1c8.js"></script> Save niksumeiko/360164708c3b326bd1c8 to your computer and use it in GitHub Desktop. Download ZIP Disable HTML form input autocomplete and autofill Raw 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.

Load earlier comments... Copy link

kamil-kielczewski commented Apr 11, 2024 • edited Loading

Uh oh!

There was an error while loading. Please reload this page.

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)

Uh oh!

There was an error while loading. Please reload this page.

Copy link

Zain-Muhammad commented Apr 18, 2024

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>

Uh oh!

There was an error while loading. Please reload this page.

Copy link

lladneknai commented Apr 22, 2024 • edited Loading

Uh oh!

There was an error while loading. Please reload this page.

<input autocomplete="new-password" />

This is the way. Here is why.

Atrocious.

Uh oh!

There was an error while loading. Please reload this page.

Copy link

EliminatorX commented Apr 29, 2024

You can try this...

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

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

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

</form>

Uh oh!

There was an error while loading. Please reload this page.

Copy link

wagnerlanger commented May 21, 2024 • edited Loading

Uh oh!

There was an error while loading. Please reload this page.

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

Uh oh!

There was an error while loading. Please reload this page.

Copy link

StevenHachel commented Jun 4, 2024

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!

Uh oh!

There was an error while loading. Please reload this page.

Copy link

usamamuneerchaudhary commented Jun 4, 2024 • edited Loading

Uh oh!

There was an error while loading. Please reload this page.

none of the above works for me :(

Uh oh!

There was an error while loading. Please reload this page.

Copy link

RNutley commented Jun 6, 2024 • edited Loading

Uh oh!

There was an error while loading. Please reload this page.

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.

Uh oh!

There was an error while loading. Please reload this page.

Copy link

warrenrodrigues commented Jun 18, 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.

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

Uh oh!

There was an error while loading. Please reload this page.

Copy link

yue-zhou commented Jul 2, 2024 • edited Loading

Uh oh!

There was an error while loading. Please reload this page.

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 .

Uh oh!

There was an error while loading. Please reload this page.

Copy link

mhmdeve commented Jul 6, 2024

autocomplete="nope" is the answer

Uh oh!

There was an error while loading. Please reload this page.

Copy link

ClaireWatson2 commented Jul 10, 2024

I am new here, Can I ask a question?

Uh oh!

There was an error while loading. Please reload this page.

Copy link

sudomaxime commented Aug 3, 2024

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 !

Uh oh!

There was an error while loading. Please reload this page.

Copy link

lubosdz commented Aug 13, 2024

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

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

Uh oh!

There was an error while loading. Please reload this page.

Copy link

RiOTDESiGN commented Aug 20, 2024

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.

Uh oh!

There was an error while loading. Please reload this page.

Copy link

moosefaceee commented Aug 24, 2024 • edited Loading

Uh oh!

There was an error while loading. Please reload this page.

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. :(

Uh oh!

There was an error while loading. Please reload this page.

Copy link

valentimmx commented Sep 21, 2024

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

Uh oh!

There was an error while loading. Please reload this page.

Copy link

moosefaceee commented Sep 21, 2024

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.

Uh oh!

There was an error while loading. Please reload this page.

Copy link

rawaby88 commented Sep 23, 2024

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

Uh oh!

There was an error while loading. Please reload this page.

Copy link

tlevivsoft commented Oct 8, 2024

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....

Uh oh!

There was an error while loading. Please reload this page.

Copy link

moosefaceee commented Oct 8, 2024

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.

Uh oh!

There was an error while loading. Please reload this page.

Copy link

moosefaceee commented Oct 8, 2024

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

Uh oh!

There was an error while loading. Please reload this page.

Copy link

GabrielDSousa commented Nov 16, 2024

None of these works for me either. The only thing I have seen is that when you remove the name AND id, the input text doesn't show suggestions. For me, that's enough, but it isn't sufficient for all uses.

Uh oh!

There was an error while loading. Please reload this page.

Copy link

euCaioSantos commented Nov 17, 2024 • edited Loading

Uh oh!

There was an error while loading. Please reload this page.

My form is in Wordpress Elementor, I used this HTML code for a long time to stop the autocomplete of the number field.

But as incredible as it may seem, it only works when there are only 2 fields on the form, as soon as I add the email field, the field: name returns to autocomplete.

my code for elementor!

<script> document.addEventListener('DOMContentLoaded', function() { // Função para aplicar configurações ao campo function applySettings() { let gtmwhatsapp = document.getElementById('form-field-gtmwhatsapp'); if (gtmwhatsapp) { gtmwhatsapp.minLength = 15; gtmwhatsapp.maxLength = 15; gtmwhatsapp.pattern = "\\(\\d{2}\\) \\d{5}-\\d{4}"; gtmwhatsapp.title = "Adicione o número corretamente. Ex: (63) 9 9999-9999"; gtmwhatsapp.addEventListener('input', function () { // Remove todos os caracteres não numéricos gtmwhatsapp.value = gtmwhatsapp.value.replace(/\D/g, ''); // Adiciona formatação "(xx) xxxxx-xxxx" if (gtmwhatsapp.value.length >= 11) { gtmwhatsapp.value = gtmwhatsapp.value.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3"); } }); const form = gtmwhatsapp.form; if (form) { form.addEventListener('submit', function (event) { if (!gtmwhatsapp.validity.valid) { alert('Adicione o número corretamente'); event.preventDefault(); } }); } gtmwhatsapp.setAttribute('autocomplete', 'off'); gtmwhatsapp.setAttribute('inputmode', 'numeric'); // Adiciona inputmode como numeric } } // Aplicar configurações ao carregar a página applySettings(); // Evento específico do Elementor para detectar abertura do popup jQuery(document).on('elementor/popup/show', function() { applySettings(); }); }); </script>

Uh oh!

There was an error while loading. Please reload this page.

Copy link

rubens-shoji commented Nov 22, 2024 • edited Loading

Uh oh!

There was an error while loading. Please reload this page.

This works for me!

The readonly attr with a onfocus function.

<input readonly onfocus="this.removeAttribute('readonly');" v-model="form.email" type="text" name="email" id="email" autocomplete="off" />

Uh oh!

There was an error while loading. Please reload this page.

Copy link

upangka commented Dec 27, 2024

input:-webkit-autofill { transition: background-color 5000s ease-in-out 0s; }

Uh oh!

There was an error while loading. Please reload this page.

Copy link

LuizAugustoS commented Feb 12, 2025

i'm using AngularJS and have this problem: I have 4 inputs: Name, ProcessNumber, LicenseNumber and ExpirationDate, in this follow sequence. if I fill in sequentially, no problem, but, if i fill the ExpirationDate first, the autocomplete="off" don't work. I've tried everything you sent in this trend, but, nothing works.

Uh oh!

There was an error while loading. Please reload this page.

Copy link

ghost commented Mar 12, 2025 • edited by ghost Loading

Uh oh!

There was an error while loading. Please reload this page.

I found a very simple solution to the problem. I set the readonly attribute on the input fields, which prevents automatic filling. Then I remove the readonly attribute on the onfocus event, when the user clicks on the input field, it becomes writable. <input name="email" onfocus="this.removeAttribute('readonly')" readonly type="text">

Uh oh!

There was an error while loading. Please reload this page.

Copy link

Jonathanvictor-dev commented Mar 13, 2025 • edited Loading

Uh oh!

There was an error while loading. Please reload this page.

readonly

The problem was solved with the solution in the following comment above.

I'm using react, I included readOnly in the inputs, combined it with useEffect, addEventListener, removeEventListener and the 'focus' event. This way, the field is not filled automatically.

Uh oh!

There was an error while loading. Please reload this page.

Copy link

dmbritos commented Mar 20, 2025 • edited Loading

Uh oh!

There was an error while loading. Please reload this page.

It also works if you remove the readOnly attribute in the window's load event:

<input type="password" readonly id="MyPasswordInput" name="MyPasswordInput"/> $(window).load(function () { $("#MyPasswordInput").removeAttr('readonly'); });

Just to clarify, NO need to change or add anything to the username/login input...

Uh oh!

There was an error while loading. Please reload this page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment You can’t perform that action at this time.