albert.walickihire me
← all solutions
html

How to disable autocomplete on inputs?

Turn off autocomplete with autocomplete off, why browsers sometimes ignore it, and which autocomplete values to use instead for passwords, codes and addresses.

Add autocomplete="off" to the input, or to the <form> to turn it off for every field inside:

<input type="text" name="coupon" autocomplete="off">

<form autocomplete="off">
  <input type="text" name="nickname">
</form>

Browsers treat autocomplete="off" as a hint, not a command. It usually hides the dropdown of values you typed before, but it doesn't always stop autofill. Password managers ignore it on login forms on purpose, and browsers may still offer to fill fields they recognize, such as addresses. No attribute reliably blocks every browser and extension.

A good place for off is a search box with your own suggestions list, where the browser's history dropdown would cover yours.

Use the right value instead of off

Often the real problem is that the browser fills the wrong thing. The fix is to tell it what each field is, using one of the standard tokens:

<input type="email" name="email" autocomplete="email">
<input type="text" name="first-name" autocomplete="given-name">
<input type="text" name="address" autocomplete="address-line1">
<input type="text" name="zip" autocomplete="postal-code">
<input type="text" name="card" autocomplete="cc-number">

Other common ones are name, family-name, tel, organization, country and street-address (for a <textarea> with the whole address). Correct tokens make forms much faster to fill, especially on phones. They're also an accessibility requirement: WCAG success criterion 1.3.5 (Identify Input Purpose) expects them on fields that ask for the user's personal data.

Passwords and one-time codes

On login forms, use username and current-password, so password managers fill the saved account.

On "create account" and "change password" forms, use new-password. Browsers then don't fill the saved password and can suggest a strong new one instead:

<input
  type="password"
  name="password"
  autocomplete="new-password"
>

For verification codes sent by text message or email, use one-time-code. Safari, for example, offers the code from a text message right above the keyboard:

<input
  type="text"
  name="code"
  inputmode="numeric"
  autocomplete="one-time-code"
>

Spellcheck, capitalization and autocorrect

These are separate features from autocomplete, and they get in the way on usernames, codes and coupon fields. Phones capitalize the first letter, and autocorrect "fixes" a username into a real word. Turn them off per field:

<input
  type="text"
  name="username"
  autocomplete="username"
  spellcheck="false"
  autocapitalize="none"
  autocorrect="off"
>

autocapitalize="none" and autocapitalize="off" mean the same. At the time of writing, autocorrect is mainly supported in Safari, so check Can I Use before you rely on it elsewhere.

Avoid the hacks

You'll find tricks like random name values, hidden fake inputs that catch the autofill, readonly removed on focus, or made-up autocomplete values. They depend on the browser's current guessing rules, stop working when those rules change, and often break autofill and password managers for people who rely on them. Use off where it makes sense, the correct token everywhere else, and accept that the user's password manager has the final say.

more solutions
work with me

Got something that needs building?

Frontend builds, full-stack features in Django, design-system work. Available for work.

See my workGet in touch