Junior
What is the purpose of the 'autocomplete' attribute and what parameters does it accept?
sobes.tech AI
Answer from AI
The autocomplete attribute allows the browser to provide autofill for form fields. It enhances usability by offering previously saved data.
The autocomplete attribute parameters are divided into two types: general and data type-specific.
General parameters:
off: Disables autofill for this field.on: Enables autofill for this field.
Data type-specific parameters (most commonly used):
name: Full name of the user.honorific-prefix: Prefix before the name (e.g., "Mr.", "Ms.").given-name: First name.additional-name: Additional names (middle name).family-name: Last name.honorific-suffix: Suffix after the name (e.g., "Jr.", "Sr.").nickname: Pseudonym.email: Email address.username: Username.new-password: New password (for password creation fields).current-password: Current password (for existing password fields).one-time-code: One-time code (e.g., for two-factor authentication).organization-title: Job title.organization: Organization name.street-address: Street and house number.address-line1: First line of address.address-line2: Second line of address.address-line3: Third line of address.address-level4: Smallest administrative unit (e.g., village).address-level3: Third largest administrative unit (e.g., district).address-level2: Second largest administrative unit (e.g., city).address-level1: Largest administrative unit (e.g., state, province).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: Additional names on credit card.cc-family-name: Last name on credit card.cc-number: Credit card number.cc-exp: Credit card expiration date (full).cc-exp-month: Expiration month.cc-exp-year: Expiration year.cc-csc: Credit card security code.cc-type: Credit card type.transaction-currency: Transaction currency.transaction-amount: Transaction amount.language: Preferred language.
Parameters can also include prefixes, such as shipping or billing, indicating data for delivery or payment, respectively.
Example usage:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" autocomplete="given-name">
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="email">
<label for="street">Street:</label>
<input type="text" id="street" name="street" autocomplete="shipping street-address">
</form>