Article Categories

Selected Reading

How to use autocomplete attribute in HTML?

HTML Web Development Front End Technology

The HTML autocomplete attribute controls whether browsers should automatically fill in form fields based on previously entered values. When set to on, the browser provides suggestions from the user's input history. When set to off, it disables this functionality for enhanced privacy or security.

The autocomplete attribute can be applied to both <form> elements (affecting all contained inputs) and individual <input> elements for granular control.

Syntax

Following is the syntax for using the autocomplete attribute with form elements −

<form autocomplete="on|off">...</form>

Following is the syntax for using the autocomplete attribute with input elements −

<input type="text" name="fieldname" autocomplete="on|off">

Autocomplete Values

The autocomplete attribute accepts the following values −

on − Enables autocomplete suggestions based on previously entered values.
off − Disables autocomplete suggestions for the field.
Specific tokens − HTML5 supports specific autocomplete tokens like name, email, tel, address-line1, etc., for semantic autocomplete.

Using Autocomplete with Form Element

When applied to a <form> element, the autocomplete attribute affects all form controls within that form. This provides a convenient way to enable or disable autocomplete for an entire form.

Example

Following example demonstrates using the autocomplete attribute with the form element −

<!DOCTYPE html>
<html>
<head>
   <title>Form Autocomplete Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h3>Form with Autocomplete Enabled</h3>
   <div style="border: 2px solid #ddd; padding: 20px; width: 350px; background-color: #f9f9f9;">
      <form action="#" method="get" autocomplete="on">
         <label for="sname">Student Name:</label>
         <input type="text" id="sname" name="sname" style="margin-left: 10px;">
         <br><br>
         <label for="email">Email:</label>
         <input type="email" id="email" name="email" style="margin-left: 47px;">
         <br><br>
         <input type="submit" value="Submit" style="padding: 5px 15px;">
      </form>
   </div>
   <p><em>Try typing in the fields after entering data once and submitting.</em></p>
</body>
</html>

With autocomplete="on" on the form, both input fields will show suggestions from previous entries.

Using Autocomplete with Input Elements

The autocomplete attribute can be applied to individual <input> elements, allowing fine-grained control over which fields should provide suggestions and which should not.

Example − Individual Input Control

Following example shows autocomplete enabled on one field and disabled on another −

<!DOCTYPE html>
<html>
<head>
   <title>Input Autocomplete Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h3>Mixed Autocomplete Settings</h3>
   <div style="border: 2px solid #ddd; padding: 20px; width: 350px; background-color: #f9f9f9;">
      <form action="#" method="get">
         <label for="username">Username:</label>
         <input type="text" id="username" name="username" autocomplete="on" style="margin-left: 10px;">
         <br><br>
         <label for="password">Password:</label>
         <input type="password" id="password" name="password" autocomplete="off" style="margin-left: 15px;">
         <br><br>
         <input type="submit" value="Login" style="padding: 5px 15px;">
      </form>
   </div>
   <p><em>Username field will show suggestions, password field will not.</em></p>
</body>
</html>

In this example, the username field enables autocomplete for user convenience, while the password field disables it for security.

Example − Semantic Autocomplete Tokens

HTML5 supports specific autocomplete tokens that provide semantic meaning to browsers −

<!DOCTYPE html>
<html>
<head>
   <title>Semantic Autocomplete Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h3>Contact Form with Semantic Autocomplete</h3>
   <div style="border: 2px solid #ddd; padding: 20px; width: 400px; background-color: #f9f9f9;">
      <form action="#" method="post">
         <label for="fullname">Full Name:</label>
         <input type="text" id="fullname" name="fullname" autocomplete="name" style="margin-left: 15px; width: 200px;">
         <br><br>
         <label for="useremail">Email:</label>
         <input type="email" id="useremail" name="useremail" autocomplete="email" style="margin-left: 50px; width: 200px;">
         <br><br>
         <label for="phone">Phone:</label>
         <input type="tel" id="phone" name="phone" autocomplete="tel" style="margin-left: 48px; width: 200px;">
         <br><br>
         <input type="submit" value="Submit" style="padding: 8px 20px;">
      </form>
   </div>
   <p><em>Browsers can intelligently suggest appropriate data for each field type.</em></p>
</body>
</html>

Using semantic tokens like name, email, and tel helps browsers provide more accurate autocomplete suggestions.

Common Autocomplete Tokens

HTML5 provides several semantic autocomplete tokens for better user experience −

Token	Description	Example Usage
`name`	Full name of the person	`autocomplete="name"`
`email`	Email address	`autocomplete="email"`
`tel`	Telephone number	`autocomplete="tel"`
`address-line1`	First line of street address	`autocomplete="address-line1"`
`postal-code`	ZIP or postal code	`autocomplete="postal-code"`
`country`	Country name	`autocomplete="country"`
`current-password`	Current password field	`autocomplete="current-password"`
`new-password`	New password field	`autocomplete="new-password"`

Autocomplete Priority

When both form and input elements have autocomplete attributes, the input-level setting takes precedence. This allows for granular control where most fields follow the form's setting, but specific fields can override it.

Example − Override Form Setting

<!DOCTYPE html>
<html>
<head>
   <title>Autocomplete Priority Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h3>Form-level vs Input-level Autocomplete</h3>
   <div style="border: 2px solid #ddd; padding: 20px; width: 350px; background-color: #f9f9f9;">
      <form action="#" method="post" autocomplete="off">
         <p><strong>Form has autocomplete="off"</strong></p>
         <label for="public-info">Public Info:</label>
         <input type="text" id="public-info" name="public-info" style="margin-left: 15px;">
         <br>&lt

Kumar Varma

Updated on: 2026-03-16T21:38:53+05:30

709 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next