Sobes.tech
Junior

What is the purpose of the 'autocomplete' attribute and what parameters can it accept?

sobes.tech AI

Answer from AI

The autocomplete attribute is used to suggest to the browser how to automatically fill form fields based on previous user inputs. This enhances usability and speeds up form filling.

Main parameters:

  • on: Enable autocomplete.
  • off: Disable autocomplete.

In addition to on and off, there are a number of predefined values describing the type of data to be filled. Some of them:

  • name: Full name.
  • honorific-prefix: Honorific prefix (e.g., "Mr.", "Ms.").
  • given-name: First name.
  • additional-name: Middle name or second name.
  • family-name: Last name.
  • honorific-suffix: Suffix to the name (e.g., "Jr.").
  • nickname: Nickname.
  • email: Email address.
  • username: Username.
  • new-password: New password (for registration forms).
  • current-password: Current password (for login forms).
  • organization-title: Position.
  • organization: Organization.
  • street-address: Address.
  • address-line1, address-line2, address-line3: Address lines.
  • address-level4, address-level3, address-level2, address-level1: Address levels (e.g., country, region, city, district).
  • country: Country.
  • country-name: Name of the country.
  • postal-code: Postal code.
  • cc-name: Name on credit card.
  • cc-given-name: First name on credit card.
  • cc-additional-name: Middle name on credit card.
  • cc-family-name: Last name on credit card.
  • cc-number: Credit card number.
  • cc-exp: Credit card expiration date in MM/YY format.
  • cc-exp-month: Expiration month.
  • cc-exp-year: Expiration year.
  • cc-csc: Credit card security code (CVV).
  • cc-type: Credit card type.
  • tel: Phone number.
  • tel-national: Phone number without country code.
  • tel-area-code: Area code of the phone number.
  • tel-local: Phone number without country and area code.
  • tel-extension: Phone extension.
  • bday: Birth date.
  • bday-day: Birth day.
  • bday-month: Birth month.
  • bday-year: Birth year.
  • sex: Gender.
  • url: Homepage URL.
  • photo: Photo URL.

Some values can be combined with prefixes, for example, shipping or billing, to specify shipping or billing address.

<input type="text" autocomplete="name" id="name">
<input type="email" autocomplete="email" id="email">
<input type="password" autocomplete="new-password" id="password">
<input type="text" autocomplete="shipping street-address" id="shipping_address">