A cosa serve l'attributo autocomplete e quali…

L'attributo autocomplete consente al browser di fornire suggerimenti di completamento automatico per i campi del modulo. Migliora l'usabilità offrendo dati precedentemente salvati.

I parametri dell'attributo autocomplete si dividono in due tipi: generali e per tipo di dato.

Parametri generali:

off: Impedisce il completamento automatico per questo campo.
on: Abilita il completamento automatico per questo campo.

Parametri per tipo di dato (più comunemente usati):

name: Nome completo dell'utente.
honorific-prefix: Prefisso prima del nome (ad esempio, "Mr.", "Ms.").
given-name: Nome.
additional-name: Nomi aggiuntivi (secondo nome, ecc.).
family-name: Cognome.
honorific-suffix: Suffisso dopo il nome (ad esempio, "Jr.", "Sr.").
nickname: Soprannome.
email: Indirizzo email.
username: Nome utente.
new-password: Nuova password (per campi di creazione password).
current-password: Password attuale (per campi di inserimento password esistenti).
one-time-code: Codice usa e getta (ad esempio, per autenticazione a due fattori).
organization-title: Titolo dell'organizzazione.
organization: Nome dell'organizzazione.
street-address: Indirizzo (via e numero civico).
address-line1: Prima riga dell'indirizzo.
address-line2: Seconda riga dell'indirizzo.
address-line3: Terza riga dell'indirizzo.
address-level4: La più piccola unità amministrativa (ad esempio, villaggio).
address-level3: La terza unità amministrativa per grandezza (ad esempio, distretto).
address-level2: La seconda unità amministrativa per grandezza (ad esempio, città).
address-level1: La più grande unità amministrativa (ad esempio, regione, stato).
country: Paese.
country-name: Nome del paese.
postal-code: Codice postale.
cc-name: Nome sulla carta di credito.
cc-given-name: Nome sulla carta di credito.
cc-additional-name: Nomi aggiuntivi sulla carta di credito.
cc-family-name: Cognome sulla carta di credito.
cc-number: Numero della carta di credito.
cc-exp: Data di scadenza della carta di credito.
cc-exp-month: Mese di scadenza.
cc-exp-year: Anno di scadenza.
cc-csc: Codice di sicurezza della carta.
cc-type: Tipo di carta di credito.
transaction-currency: Valuta della transazione.
transaction-amount: Importo della transazione.
language: Lingua preferita.

I parametri possono anche includere prefissi, ad esempio, shipping o billing, indicando che si tratta di dati di consegna o pagamento.

Esempio di utilizzo:

<form>
  <label for="name">Nome:</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">Via:</label>
  <input type="text" id="street" name="street" autocomplete="shipping street-address">
</form>

A cosa serve l'attributo autocomplete e quali parametri accetta?