Autocomplete form HTML5: best practice
L'attributo autocomplete suggerisce al browser come riempire automaticamente i campi del form basandosi su dati salvati dall'utente. Una configurazione corretta riduce il tempo di compilazione, abbatte gli errori di digitazione e migliora il tasso di conversione, specie su mobile. Vediamo i valori standard e come usarli per ogni tipo di campo del form.
Valori standard
WHATWG ha definito un vocabolario preciso: name, given-name, family-name per i nomi; email per email; tel per telefoni; street-address, postal-code, country per indirizzi; cc-name, cc-number, cc-exp per carte di credito; current-password, new-password per password. Usare i valori canonici garantisce massima interoperabilità con browser e password manager su tutti i dispositivi.
Password e sicurezza
Distingui sempre tra current-password (login) e new-password (registrazione/cambio). Questo permette ai password manager di suggerire una nuova password robusta nelle registrazioni e di compilare la password esistente nei login. Per le username usa autocomplete="username" o autocomplete="email" se l'identificativo è un'indirizzo email, così i gestori di credenziali fanno match preciso.
Autocomplete per ecommerce
Nei checkout, l'autocomplete è critico per la conversione. Usa una sezione "shipping" e "billing" tramite la sintassi shipping street-address o billing postal-code. Questa convenzione permette ai browser di offrire indirizzi diversi per spedizione e fatturazione. Per pagamenti cc-name, cc-number, cc-exp-month, cc-exp-year, cc-csc abilitano la compilazione automatica delle carte di credito salvate. Combinata con Payment Request API e Apple Pay/Google Pay, l'esperienza di acquisto diventa quasi istantanea, riducendo l'abbandono carrello.
Sezioni e multipli account
Per form con più contatti (cliente + accompagnatore + emergency contact) usa la sintassi section-* per distinguere: section-primary given-name, section-secondary given-name. Browser e password manager useranno questa informazione per offrire compilazioni distinte. Per registrazioni multi-utente in una sola pagina riduce confusione e accelera l'inserimento. È una feature avanzata supportata bene dai browser moderni e particolarmente apprezzata in scenari enterprise come HR management o sistemi B2B con compilazione multipla.
Autocomplete e privacy
L'autocomplete è gestito interamente lato client dal browser, i dati restano sul dispositivo dell'utente. Il server non vede mai cosa è salvato nel password manager o nella rubrica indirizzi. Questa privacy by design è uno dei punti di forza dell'API. Per form sensibili come campi anti-frode (data ultima transazione, codice OTP), usa autocomplete="off" o "one-time-code" per evitare suggerimenti dai cookie storage. Per OTP via SMS, "one-time-code" + WebOTP API consente di compilare automaticamente il codice ricevuto via SMS, UX straordinaria su mobile.
WebOTP per autenticazione
WebOTP API è una feature avanzata che, abbinata ad autocomplete="one-time-code", consente di leggere automaticamente codici di autenticazione ricevuti via SMS. Il messaggio SMS deve avere un formato specifico (with hostname dell'app). L'utente riceve un toast di richiesta di permesso. Approvato, il codice viene riempito automaticamente nel form. Riduce drasticamente friction nei flussi di verifica via SMS. Supporto Chrome Android nativo, fallback graceful in altri browser (utente copia/incolla manualmente). Best practice per app con autenticazione mobile a due fattori.
Browser e password manager
Diversi password manager (1Password, LastPass, Bitwarden, Dashlane, Apple Keychain, Google Password Manager) implementano differentemente i token autocomplete. Test routine: prova ciascuno con i tuoi form e verifica che riconoscano i campi correttamente. Token canonici WHATWG hanno la migliore compatibilità. Per form sospetti (login non riconosciuto dal password manager), aggiungi name attribute coerente con il token (autocomplete="username" + name="username"). Per Apple Keychain su iOS, l'integrazione AutoFill con OTP via SMS richiede dominio dichiarato in apple-app-site-association. Documentazione di Apple e Google su password autofill è la fonte autorevole per dettagli implementativi recenti.
Procedura passo-passo
- Per il login: input username con autocomplete="username", password con autocomplete="current-password".
- Per registrazione: nuova password con autocomplete="new-password".
- Per anagrafica: given-name, family-name separati o name unico per il nome completo.
- Per indirizzi usa street-address, postal-code, address-level2 (città), country.
- Per pagamenti usa cc-name, cc-number, cc-exp-month, cc-exp-year, cc-csc.
- Per disabilitare il completamento usa autocomplete="off" o "new-password" su campi sensibili.
- Testa il comportamento su Chrome, Firefox e Safari per uniformità.
Errori comuni e come risolverli
- autocomplete="off" generico: i browser moderni lo ignorano per sicurezza/UX; usa valori standard.
- Username senza autocomplete: i password manager non riconoscono il campo e non offrono compilazione automatica.
- Mancata distinzione current/new password: i gestori suggeriscono password sbagliate o nuove inutili.
- Indirizzo in un solo campo: usare un textarea unico riduce interoperabilità; separa via, città, CAP.
- Valori non standard: parole inventate non vengono riconosciute; usa i token canonici WHATWG.
Domande frequenti
D: Posso disabilitare l'autocompletamento su un form?
R: Sì, ma sconsigliato. Browser moderni rispettano solo certi opt-out per sicurezza (es. carte di credito).
D: Autocomplete funziona offline?
R: Sì, i dati salvati sono nel browser. Non richiede connessione.
D: I valori sono case-sensitive?
R: No, ma usa la forma minuscola canonica per uniformità.
D: Autocomplete influisce sulla privacy?
R: I dati restano sul dispositivo dell'utente. Il sito non vede cosa è memorizzato.
Hai bisogno di aiuto?
Se vuoi sviluppo web con il team di G Tech Group, scrivici tramite il modulo di contatto.