Sobes.tech
Junior

Waarvoor wordt het 'autocomplete'-attribuut gebruikt en welke parameters kan het aannemen?

sobes.tech AI

Antwoord van AI

Het attribuut autocomplete wordt gebruikt om de browser te suggereren hoe automatisch de formuliervelden moeten worden ingevuld op basis van eerdere invoer van de gebruiker. Dit verbetert het gebruiksgemak en de snelheid van het invullen van formulieren.

Belangrijkste parameters:

  • on: Automatisch aanvullen inschakelen.
  • off: Automatisch aanvullen uitschakelen.

Naast on en off zijn er verschillende vooraf gedefinieerde waarden die het type gegevens beschrijven dat moet worden ingevuld. Enkele hiervan:

  • name: Volledige naam.
  • honorific-prefix: Aanhef van de naam (bijvoorbeeld "De heer", "Mevrouw").
  • given-name: Voornaam.
  • additional-name: Tweede naam of achternaam.
  • family-name: Achternaam.
  • honorific-suffix: Achtervoegsel van de naam (bijvoorbeeld "Jr.").
  • nickname: Bijnaam.
  • email: E-mailadres.
  • username: Gebruikersnaam.
  • new-password: Nieuw wachtwoord (voor registratieformulier).
  • current-password: Huidig wachtwoord (voor login).
  • organization-title: Functie.
  • organization: Organisatie.
  • street-address: Adres.
  • address-line1, address-line2, address-line3: Adresregels.
  • address-level4, address-level3, address-level2, address-level1: Adresniveaus (bijvoorbeeld land, regio, stad, district).
  • country: Land.
  • country-name: Landnaam.
  • postal-code: Postcode.
  • cc-name: Naam op creditcard.
  • cc-given-name: Voornaam op creditcard.
  • cc-additional-name: Tweede naam op creditcard.
  • cc-family-name: Achternaam op creditcard.
  • cc-number: Creditcardnummer.
  • cc-exp: Vervaldatum creditcard in MM/JJ formaat.
  • cc-exp-month: Vervaldomaa
  • cc-exp-year: Vervaldatum jaar.
  • cc-csc: Veiligheidscode creditcard (CVV).
  • cc-type: Type creditcard.
  • tel: Telefoonnummer.
  • tel-national: Telefoonnummer zonder landcode.
  • tel-area-code: Netnummer.
  • tel-local: Telefoonnummer zonder landcode en netnummer.
  • tel-extension: Toestelextensie.
  • bday: Geboortedatum.
  • bday-day: Geboortedag.
  • bday-month: Geboortemaand.
  • bday-year: Geboortejaar.
  • sex: Geslacht.
  • url: URL van de startpagina.
  • photo: URL van de foto.

Sommige waarden kunnen worden gecombineerd met voorvoegsels, bijvoorbeeld shipping of billing, om het bezorg- of factuuradres aan te geven.

<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">