HTML autocomplete Attribute

Description

The HTML autocomplete attribute is designed to enhance the user experience by streamlining form input processes in web pages and applications. This attribute enables web developers to set up automatic completion of form fields, based on historical user input or predefined suggestions. When a user starts typing in a field with the autocomplete attribute enabled, the browser can predict and suggest full or partial input values, making data entry faster and reducing the likelihood of errors.

The attribute can be applied to <form> elements, to globally activate or deactivate autocomplete for all form controls within the form, or to specific <input>, <textarea>, and <select> elements to individually control their behavior. The value of the autocomplete attribute can be a string that specifies what kind of information the user can enter, such as email, name, address, or tel, among others, guiding the browser in providing relevant suggestions.

By optimizing form-filling processes, the autocomplete attribute enhances usability, particularly on mobile devices or other situations where typing can be cumbersome. Additionally, it can be set to off to disable autocomplete in cases where automatic suggestions might not be appropriate, such as for sensitive or unique information inputs. Implementing the autocomplete attribute correctly is crucial for privacy and security, ensuring that sensitive information is not inadvertently suggested in inappropriate contexts.

Syntax

<input autocomplete="on | off | <token-list>">

Values

• onThis allows the browser to enable autocompletion for the specific form element or the entire form (if used on the <form> element).
• offThis instructs the browser to disable autocompletion for the element.
• <token-list>These tokens provide more specific guidance to the browser on the expected type of information for the field. List one or more tokens by separating them with a space. Here are some common examples:
  • name: User's full name
  • given-name: User's first name
  • family-name: User's last name
  • username: Login username
  • email: User's email address
  • honorific-prefix: Titles like Mr., Ms., etc.
  • organization: User's organization
  • street-address: User's street address
  • address-line1: Address line 1 (flexible)
  • address-line2: Address line 2 (flexible)
  • locality: City name
  • region: State or province
  • postal-code: ZIP or postal code
  • country-code: User's country code
  • tel: Telephone number
  • fax: Fax number
  • url: Website URL
  • cc-number: Credit card number (use with caution due to security concerns)
  • cc-exp: Credit card expiration date (use with caution due to security concerns)
  • current-password: Password field (not recommended for security reasons)

Applies To

The autocomplete attribute can be used on the following html elements.

• <form>
• <input>

Example

<form action="formscript.php" autocomplete="on">

  <div>

	<label for="name">Your Name:</label>

	<input type="text" name="name" id="name">

  </div>

  <div>

	<label for="phone">Phone Number:</label>

	<input type="number" id="phone" name="phone">

	<br>

  </div><br>

  <input type="submit" value="Send">

</form>

Browser Support

The following table will show you the current browser support for the HTML autocomplete Attribute.

Desktop
79	14	4	12.1	6

Tablets / Mobile
18	4	12.1	6	1	4.4

Last updated by CSSPortal on: 25th March 2024