HTML autocomplete Attribute

Introduction

The autocomplete attribute is a handy feature in HTML that allows developers to control whether a browser should automatically complete user input in a form. This attribute is applied to form elements and can be particularly useful for enhancing user experience and streamlining data entry.

What You’ll Learn

Purpose of autocomplete

The primary purpose of the autocomplete attribute is to specify whether a browser should provide autocomplete suggestions for a particular input field. By default, most browsers have autocomplete enabled, which means they try to predict and fill in values based on the user’s previous inputs. However, there are situations where you might want to control or disable this behavior.

📝 Syntax

Add autocomplete to a form control with on, off, or a semantic token:

<input type="email" autocomplete="email">

Syntax Rules

• Valid on input, select, textarea, and form.
• Use off to disable autofill for a specific field.
• Use semantic tokens for better autofill accuracy.
• Setting autocomplete on <form> applies to all fields unless overridden.

💎 Values

The autocomplete attribute accepts various values to define different behaviors. The two main values are:

• on — Allows the browser to provide autocomplete suggestions for the input field (default in many cases).
• off — Disables autocomplete for the input field. Use when you want to prevent the browser from suggesting or remembering previous input.

Common semantic tokens include:

• name, email, tel, street-address — Contact and address fields.
• current-password — Login password field.
• new-password — Registration or password-change field.
• one-time-code — SMS or email verification codes.

<input autocomplete="off">
<input autocomplete="email">
<input type="password" autocomplete="current-password">
<input type="password" autocomplete="new-password">

Applicable Elements

Examples Gallery

on/off form example, dynamic new-password, and semantic token values.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" autocomplete="off">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" autocomplete="current-password">

  <input type="submit" value="Submit">
</form>

<input type="password" id="dynamicField">

<script>
  document.getElementById("dynamicField").autocomplete = "new-password";
</script>

<input type="text" autocomplete="name">
<input type="email" autocomplete="email">
<input type="tel" autocomplete="tel">

♿ Accessibility

• Improves usability — Autofill reduces typing effort for users with motor disabilities.
• Pair with labels — Autocomplete does not replace accessible <label> elements.
• Use correct tokens — Helps assistive tech and password managers identify field purpose.
• Do not disable unnecessarily — Turning off autofill on standard login fields can frustrate users.

💡 Best Practices