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>

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>



Do you find this helpful?

Related articles