HTML autocomplete Attribute: How to Use it with form and input

The form autocomplete attribute in HTML helps users fill out forms faster because it shows them saved input for common fields.

What Is the Form Autocomplete Attribute in HTML?

The autocomplete attribute tells the browser whether it should remember user input and suggest saved values.

It works on the whole form or a single input. Most browsers support this feature and let users complete forms. That does not require users to type the same data again.

A form that uses autocomplete helps users finish tasks faster with fewer errors.

Set the attribute to "on" or "off" inside a <form> or an <input> tag. Here is an example:

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

The "on" value to tell the browser to store the value and show it again while the "off" to block it. Here is a quick comparison between them:

Full List of Autocomplete Attribute Values in HTML Form and Input

You can use more than just “on” or “off” to help the browser fill in the right information. Here is a list that shows them:

• name for full name
• email for email address
• username for login names
• new-password to set a new password
• tel for phone number
• address-line1 for street address
• postal-code for zip code
• country for country name
• cc-number for card number
• cc-exp for card expiration date

Each value maps the field to a specific type of stored data.

For examples:

<input type="text" name="fullname" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<input type="text" name="username" autocomplete="username">
<input type="password" name="newpass" autocomplete="new-password">
<input type="text" name="cardexp" autocomplete="cc-exp">
<input type="text" name="cardnumber" autocomplete="cc-number">

These help the user fill out the form faster. When the browser shows saved values, The user does not write the information; he simply chooses one from the list.

Here is a quick comparison between autofill in HTML and JavaScript:

• HTML autocomplete uses the browser’s built-in memory to suggest saved values. It needs no extra code.
• JavaScript autofill depends on scripts that set input values through logic and functions.

If you need full control, use JavaScript. If you want a quick way to help users, use the HTML attribute.

How to Use Autocomplete on <form> vs <input> in HTML

You can place autocomplete="on" or "off" inside a <form> to apply it to all fields at once.

<form autocomplete="on">
  <input type="email" name="email">
  <input type="tel" name="phone">
</form>

Also, you can place it inside each <input> to choose which fields to include.

<form>
  <input type="text" name="fullname" autocomplete="name">
  <input type="password" name="pass" autocomplete="off">
</form>

The input-level setting always overrides the form-level one.

Disable Autocomplete for Sensitive Fields

Some fields require extra protection. Set autocomplete=”off” to not allow browsers to save or suggest input.

<input type="password" name="login-password" autocomplete="off">

This helps prevent auto-filled mistakes and protects private data from others who use the same device.

Examples of Autocomplete Attribute in HTML

Basic Name and Email Fields with Autocomplete:

<form autocomplete="on">
  <input type="text" name="fullname" autocomplete="name">
  <input type="email" name="email" autocomplete="email">
</form>

This form lets the browser use autocomplete for both fields. If the user typed the data before, the browser shows suggestions to speed up the process.

Disable Autocomplete for Login Form:

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

This form does not allow the browser to suggest or save any input. Use it to keep login data private and prevent unwanted autofill.

Mixed Use of Autocomplete for Custom Control:

<form>
  <input type="text" name="first-name" autocomplete="given-name">
  <input type="text" name="last-name" autocomplete="family-name">
  <input type="password" name="newpass" autocomplete="new-password">
  <input type="tel" name="mobile" autocomplete="tel">
</form>

This form sets a custom value for each input. The browser reads each value and shows the right suggestion. It helps fill each field with the correct saved data.

Credit Card Form with Autocomplete:

<form>
  <input type="text" name="card-number" autocomplete="cc-number">
  <input type="text" name="exp-date" autocomplete="cc-exp">
  <input type="text" name="zip" autocomplete="postal-code">
</form>

This example shows a payment form. It uses field-specific values so the browser can match and suggest card info and postal codes. The user can complete payments faster with fewer steps.

Wrapping Up

In this article, you learned what the autocomplete attribute does and how it changes form behavior. You also saw where to place it, how to use field-specific values, when to block suggestions, and how it compares to JavaScript solutions.

Here is a quick recap:

• Use autocomplete to help users fill forms faster.
• Add it to forms or inputs based on what you need.
• Use field values like name or email to guide the browser.
• Turn it off for passwords or private data.

FAQs

Similar Reads