How to turn off HTML input form field suggestions?

Autocomplete: The Browser's Glasnost

As with any war, the battle against autofill is fought on numerous fronts. Here are the most noteworthy battlefield strategies.

"Woah, I'm Back in the USSR!" with "autocomplete=off"

While autocomplete="off" is the Mojave Desert of disabling suggestions, browsers sometimes pump exceptional user experience into this barren estate, thus ignoring the attribute for usernames and passwords. Persevere, for other tools are at our disposal!

"A Day in the Life" with "autocomplete=new-password"

This attribute is the informant undercover, telling the browser this is a new password field and thereby cancelling autofill. Chromium, Safari, and the younger, cooler Firefox versions are in on the operation, ensuring smooth maneuvers.

"Helter Skelter": JavaScript to the Rescue

For browsers that love to break the rules, JavaScript comes in like a rockstar. Event handlers can actively change the attribute once the input field is in focus or clear any pre-filled data:

document.getElementById('myInput').addEventListener('focus', function() {
    this.setAttribute('autocomplete', 'off'); // "Browsers, off you go!" 
    this.value = '';  // "Let's start with a clean slate, shall we?"
});


"While My Guitar Gently Weeps" over Other Field Types

If your form is for search inputs, using type="search" can strum away those suggestions without any extravagant addons:

<input type="text" name="query">


This, however, does like to stage its own little debut by changing the keyboard on mobiles and even bring its own clear button to the concert!

React: Not Your Usual Autocomplete Story

In the enclave of React, we keep to the same script with a touch of JSX syntax:

<input
  type="text"
  name="user"
  autoComplete="off"  // This isn't a typo. It's camelCase!
  value={this.state.value}
  onChange={this.handleChange}
/>


Autocomplete: The Plot Thickens…

The "Spy Who Came in from the Cold"

autocomplete="new-password" on sensitive fields also signals the browser to offer its own Agent Q-like gadgets i.e., password generation for enhanced user security.

The "Readonly" Directive

The readonly attribute can also play double agent. Have it guard your field from autofill until brought into focus, upon which an inside operative (a script) could neutralise it:

<input type="text" name="user" readonly onfocus="this.removeAttribute('readonly');">


"The Unbearable Lightness of User Experience"

Before you declare a Cold War on autofill, weigh its impact on user experience. Autofill is often a life-saver for users, so be sure disabling it doesn't shoot down usability.

Spycraft: The Art of Deception

Once you've recruited autocomplete="off" into your operations, remember to manage your tools wisely:

Operation "Cross-Browser"

Deploy your agents to test on multiple platforms and devices. You wouldn't want a stealth operation to be foiled by a gusty Opera or fiery Firefox, would you?

The Enigma of Chromium

Visit the MDN Web Docs and Chromium bug discussions regularly. You never know when the other side might be planning a stealthy update to the form field suggestions.