A cosa serve l'attributo 'autocomplete' e quali parametri può accettare?

L'attributo autocomplete viene utilizzato per suggerire al browser come compilare automaticamente i campi del modulo in base agli input precedenti dell'utente. Questo migliora l'usabilità e la velocità di compilazione dei moduli.

Parametri principali:

• on: Attiva l'autocompletamento.
• off: Disattiva l'autocompletamento.

Oltre a on e off, ci sono una serie di valori predefiniti che descrivono il tipo di dati da compilare. Alcuni di essi:

• name: Nome completo.
• honorific-prefix: Prefisso del nome (ad esempio, "Sig.", "Sig.ra").
• given-name: Nome.
• additional-name: Secondo nome o cognome.
• family-name: Cognome.
• honorific-suffix: Suffix del nome (ad esempio, "Jr.").
• nickname: Soprannome.
• email: Indirizzo email.
• username: Nome utente.
• new-password: Nuova password (per il modulo di registrazione).
• current-password: Password attuale (per il login).
• organization-title: Titolo o posizione.
• organization: Organizzazione.
• street-address: Indirizzo.
• address-line1, address-line2, address-line3: Linee di indirizzo.
• address-level4, address-level3, address-level2, address-level1: Livelli di indirizzo (ad esempio, paese, regione, città, distretto).
• country: Paese.
• country-name: Nome del paese.
• postal-code: CAP.
• cc-name: Nome sulla carta di credito.
• cc-given-name: Nome sulla carta di credito.
• cc-additional-name: Secondo nome 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 in formato MM/AA.
• cc-exp-month: Mese di scadenza.
• cc-exp-year: Anno di scadenza.
• cc-csc: Codice di sicurezza della carta (CVV).
• cc-type: Tipo di carta.
• tel: Numero di telefono.
• tel-national: Numero di telefono senza prefisso internazionale.
• tel-area-code: Prefisso telefonico.
• tel-local: Numero di telefono senza prefisso internazionale e prefisso telefonico.
• tel-extension: Estensione telefonica.
• bday: Data di nascita.
• bday-day: Giorno di nascita.
• bday-month: Mese di nascita.
• bday-year: Anno di nascita.
• sex: Sesso.
• url: URL della pagina principale.
• photo: URL della foto.

Alcuni valori possono essere combinati con prefissi, ad esempio, shipping o billing, per indicare l'indirizzo di consegna o di fatturazione.

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