How do you disable browser autocomplete on web form field / input tags?

To disable browser autocomplete on form fields, use the autocomplete attribute combined with browser-specific workarounds. However, note that modern browsers often ignore these settings for usability reasons. Here are the most effective methods:

1. Basic autocomplete="off"

Add autocomplete="off" to the <form> or individual <input> tags.
Works for: Most non-password fields in modern browsers.

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

2. Form-Level autocomplete="off"

Setting autocomplete="off" on the <form> disables autocomplete for all child inputs (except password managers in Chrome).

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

3. Randomize autocomplete Values

Browsers like Chrome ignore autocomplete="off" for password fields. Use non-standard values like autocomplete="new-password" or autocomplete="nope".

<!-- Disable password autofill -->
<input type="password" name="password" autocomplete="new-password">

<!-- Disable general autocomplete -->
<input type="text" name="search" autocomplete="do-not-autocomplete">

4. Chrome-Specific Workaround

Chrome respects autocomplete="off" only if the form has never been submitted before. For dynamic forms, randomize the name/id of inputs:

<input type="text" name="random_<?= rand() ?>" autocomplete="off">

5. JavaScript Workaround

Dynamically add the autocomplete="off" attribute after page load:

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('input').forEach(input => {
    input.setAttribute('autocomplete', 'off');
  });
});

6. Disable Autofill with readonly

Make the field readonly until focused (prevents autofill on page load):

<input type="text" name="cc-number" readonly 
       onfocus="this.removeAttribute('readonly')">

7. Obfuscate Field Names

Use non-standard names/IDs to bypass browser heuristics:

<input type="text" name="field-<?= md5('email') ?>" 
       id="non-standard-id" autocomplete="off">

Password Field Solutions

For password managers, use these values:

<!-- Disable saving/autofilling passwords -->
<input type="password" autocomplete="new-password">

<!-- Disable password dropdown -->
<input type="password" autocomplete="off">

Why Browsers Ignore autocomplete="off"

• Browsers prioritize user convenience over developer preferences.
• Password managers often bypass autocomplete settings.
• Fields like credit cards, addresses, and emails are targeted by autofill heuristics.

Best Practices

1. Use autocomplete="off" on both the <form> and <input> tags.
2. For passwords, use autocomplete="new-password".
3. Combine with JavaScript or randomized name/id values for Chrome.
4. Test across browsers (Chrome, Firefox, Safari, Edge).

Example: Full Form

<form autocomplete="off">
  <!-- Username (disable autocomplete) -->
  <input type="text" name="username" autocomplete="off">

  <!-- Password (disable password manager) -->
  <input type="password" name="password" autocomplete="new-password">

  <!-- Email (randomized name) -->
  <input type="email" name="email_<?= rand() ?>" autocomplete="off">

  <!-- Credit Card (readonly until focus) -->
  <input type="text" name="cc" readonly 
         onfocus="this.removeAttribute('readonly')">
</form>

No method is 100% reliable, but combining these approaches minimizes autocomplete behavior. For critical fields (e.g., credit cards), consider custom input controls or masking.