Milleks on autocomplete atribuut ja milliseid…

autocomplete atribuut võimaldab brauseril pakkuda automaatset täitmist vormi väljadele. See parandab kasutusmugavust, pakkudes eelnevalt salvestatud andmeid.

autocomplete atribuudi parameetrid jagunevad kaheks: üldised ja andmetüübi järgi.

Üldised parameetrid:

off: Keelab automaatse täitmise sellel väljal.
on: Luba automaatne täitmine sellel väljal.

Andmetüübi parameetrid (kõige sagedamini kasutatavad):

name: Kasutaja täisnimi.
honorific-prefix: Tittl enne nime (nt "Mr.", "Ms.").
given-name: Eesnimi.
additional-name: Täiendavad nimed (vahe nimi).
family-name: Perekonnanimi.
honorific-suffix: Tittl nime järel (nt "Jr.", "Sr.").
nickname: hüüdnimi.
email: E-posti aadress.
username: Kasutajanimi.
new-password: Uus parool (parooli loomise väli).
current-password: Praegune parool.
one-time-code: Ühekordne kood (nt kahefaktoriline autentimine).
organization-title: Amet.
organization: Organisatsiooni nimi.
street-address: Tänav ja maja number.
address-line1: Esimene aadressirida.
address-line2: Teine aadressirida.
address-line3: Kolmas aadressirida.
address-level4: Väikseim administratiivüksus (nt küla).
address-level3: Kolmas suurim administratiivüksus (nt piirkond).
address-level2: Teine suurim administratiivüksus (nt linn).
address-level1: Suurim administratiivüksus (nt regioon, osariik).
country: Riik.
country-name: Riigi nimi.
postal-code: Postiindeks.
cc-name: Nimi krediitkaardil.
cc-given-name: Eesnimi krediitkaardil.
cc-additional-name: Täiendavad nimed krediitkaardil.
cc-family-name: Perekonnanimi krediitkaardil.
cc-number: Krediitkaardi number.
cc-exp: Krediitkaardi kehtivusaeg (täielik kuupäev).
cc-exp-month: Kehtivuskuu.
cc-exp-year: Kehtivusaasta.
cc-csc: Krediitkaardi turvakood.
cc-type: Krediitkaardi tüüp.
transaction-currency: Transaktsiooni valuuta.
transaction-amount: Transaktsiooni summa.
language: Eelistatud keel.

Parameetrid võivad sisaldada ka prefikse, näiteks shipping või billing, mis näitavad, et need on andmed kohaletoimetamiseks või maksmiseks.

Näide kasutamisest:

<form>
  <label for="name">Nimi:</label>
  <input type="text" id="name" name="name" autocomplete="given-name">

  <label for="email">E-post:</label>
  <input type="email" id="email" name="email" autocomplete="email">

  <label for="street">Tänav:</label>
  <input type="text" id="street" name="street" autocomplete="shipping street-address">
</form>

Milleks on autocomplete atribuut ja milliseid parameetreid see võtab?