HTML Autocomplete Attribute

The autocomplete attribute defines if an input or a form field must have the autocomplete "on" or "off".

With the autocomplete attribute the browser predicts the value, and when a user starts typing in a field, the browser displays options to fill in the field, based on earlier typed values.

The autocomplete can be "on" for the input, and "off" for particular input fields, or vice versa.

Note: The autocomplete attribute works with such <input> types, like text, search, tel, url, password, email, range, and color.

Syntax

<input autocomplete="on|off">

Applies to	<form> and <input> elements.

Example of the HTML autocomplete attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="get" autocomplete="on">
      <div>
        <label for="name">Enter Your Name:</label>
        <input type="text" name="name" id="name">
      </div>
      <div>
        <label for="phone">Enter Your Phone Number:</label>
        <input type="number" id="phone" name="phone-number">
        <br>
      </div>
      <input type="submit" value="Send">
    </form>
  </body>
</html>

Try it Yourself »

Example of the HTML <form> tag where the autocomplete attribute is on:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        display: block;
        margin-bottom: 10px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" accept-charset="ISO-8859-1">
      <input type="text" name="name" placeholder="Enter your Name" autofocus>
      <input type="text" name="surname" placeholder="Enter your Surname">
      <input type="number" name="age" placeholder="Enter your Age" autocomplete="off">
      <input type="submit" value="Send">
    </form>
  </body>
</html>

Try it Yourself »

More options to control "autocomplete" behavior:

In HTML, there are several options that can be used to control autocomplete behavior beyond just turning it on or off. Here are some of the most commonly used options:

autocomplete="on" or autocomplete="off": This is the most basic option that turns autocomplete on or off for a form element. The value "on" enables autocomplete, while "off" disables it.
autocomplete="name": This option tells the browser to use the user's name as the autocomplete value for the field.
autocomplete="email": This option tells the browser to use the user's email address as the autocomplete value for the field.
autocomplete="new-password": This option tells the browser to treat the field as a new password field, so it won't automatically fill in an existing password.
autocomplete="current-password": This option tells the browser to treat the field as a current password field, so it will only autocomplete with previously saved passwords.
autocomplete="username": This option tells the browser to use the user's username as the autocomplete value for the field.
autocomplete="cc-name", autocomplete="cc-number", autocomplete="cc-exp", autocomplete="cc-csc": These options are used for credit card fields and tell the browser to use the user's credit card name, number, expiration date, or security code as the autocomplete value.
autocomplete="postal-code", autocomplete="address-level1", autocomplete="address-level2", autocomplete="address-level3", autocomplete="country": These options are used for address fields and tell the browser to use the user's postal code, state/province, city, street address, or country as the autocomplete value.

These are just a few examples of the autocomplete options available in HTML. You can find a complete list of options and their descriptions in the HTML specification.

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.