Compilazione automatica

Dover inserire di nuovo l'indirizzo per la decima volta è stancante. I browser e tu, in qualità di sviluppatore, potete aiutare gli utenti a inserire i dati più rapidamente ed evitare di inserirli nuovamente. Questo modulo ti insegna come funziona la compilazione automatica e come gli attributi degli elementi autocomplete e altri possono garantire che i browser offrano opzioni di compilazione automatica appropriate.

Come funziona la compilazione automatica?

Nell'introduzione alla compilazione automatica, hai già appreso le nozioni di base della compilazione automatica. Ma perché i browser offrono la compilazione automatica?

Compilare moduli non è un'attività interessante, ma è qualcosa che fai spesso. Nel tempo, compili molti moduli e spesso inserisci gli stessi dati. Un modo per aiutare gli utenti a compilare più rapidamente i moduli è offrire loro la possibilità di compilare automaticamente i campi del modulo con i dati inseriti in precedenza. Questa è la compilazione automatica.

In che modo i browser sanno quali dati compilare automaticamente? Dai un'occhiata a un campo del modulo di esempio per scoprirlo.

<label for="name">Name</label>
<input name="name" id="name">

Se invii questo campo del modulo, i browser memorizzano il valore (i dati che hai inserito) insieme al valore dell'attributo name (nome). Alcuni browser esaminano anche l'attributo id durante l'archiviazione e il completamento dei dati.

Supponiamo che, settimane dopo, compili un altro modulo su un altro sito web. Questo sito contiene anche un campo del modulo con name="name". Il browser ora può offrire la compilazione automatica, perché è già memorizzato un valore per il nome.

La compilazione automatica è particolarmente utile nei moduli che utilizzi regolarmente, come registrazione e accesso, pagamento, acquisto e moduli in cui devi inserire il tuo nome o indirizzo.

Puoi aiutare i browser a offrire le migliori opzioni di compilazione automatica utilizzando valori appropriati per l'attributo autocomplete. Esistono molti valori possibili per autocomplete. Ecco un esempio di indirizzi.

Il tuo browser ha già salvato un indirizzo? Bene. Dopo aver interagito con il primo campo del modulo dell'indirizzo, il browser mostra un elenco di indirizzi salvati. Puoi sceglierne uno e il browser compila tutti i campi correlati all'indirizzo. La compilazione automatica rende la compilazione dei moduli più veloce e semplice.

Non tutti i moduli di indirizzo hanno gli stessi campi e anche l'ordine dei campi varia. L'utilizzo dei valori corretti per autocomplete garantisce che il browser compili i valori corretti per un modulo. Esistono valori per country, postal-code e molti altri.

Assicurarsi che gli utenti possano accedere rapidamente e utilizzare password sicure

Molte persone non riescono a ricordare le password. La password più comune è '123456', seguita da altre combinazioni facili da ricordare. Come puoi utilizzare password sicure e univoche senza doverle ricordare tutte?

I browser hanno gestori delle password integrati per generare, salvare e compilare le password per te. Scopri come puoi aiutare i browser a compilare automaticamente le email e a gestire le password.

Puoi utilizzare autocomplete="email" per un campo email, in modo che gli utenti visualizzino l'opzione di compilazione automatica per un indirizzo email.

Poiché si tratta di un modulo di registrazione, gli utenti non devono avere la possibilità di inserire password utilizzate in precedenza. Puoi utilizzare autocomplete="new-password" per assicurarti che i browser offrano l'opzione per generare una nuova password.

Nel modulo di accesso, puoi utilizzare autocomplete="current-password" per indicare ai browser di offrire la possibilità di compilare le password salvate in precedenza per questo sito web.

Puoi configurare l'autenticazione a due fattori su molti siti web. Oltre alla password, viene inviato un codice monouso tramite SMS o un'app di autenticazione a due fattori.

Non sarebbe fantastico se il codice ricevuto nel messaggio SMS venisse suggerito dalla tastiera sullo schermo e potessi selezionarlo direttamente per compilare il valore? Su Safari 14 o versioni successive, puoi utilizzare autocomplete="one-time-code" per ottenere questo risultato. Su Chrome per Android, puoi utilizzare l'API WebOTP per ottenere questo risultato con JavaScript.

Scopri di più su come verificare i numeri di telefono sul web con le best practice per il modulo OTP via SMS.

Attenzione: l'SMS non è il metodo di autenticazione più sicuro in sé, perché i numeri di telefono possono essere riciclati e compromessi. Valuta la possibilità di utilizzare altri metodi di autenticazione a due fattori o l'autenticazione a più fattori.

Aiutare gli utenti a compilare i dati della carta di credito

Su molti siti web di e-commerce puoi utilizzare la tua carta di credito per acquistare prodotti. I siti possono utilizzare piattaforme di pagamento di terze parti che forniscono i propri moduli, ma se devi creare i tuoi moduli di pagamento, assicurati che gli utenti possano compilare facilmente i dati di pagamento.

Puoi utilizzare di nuovo l'attributo autocomplete per assicurarti che i browser offrano le opzioni di compilazione automatica corrette.

Sono presenti valori per il numero della carta di credito cc-number, la data di scadenza della carta di credito cc-exp e tutte le altre informazioni necessarie per un pagamento con carta di credito.

Utilizza un unico input per i numeri, ad esempio numeri di carte di credito e numeri di telefono, per assicurarti che i browser offrano la compilazione automatica. Utilizza elementi del modulo standard, ad esempio un <select> per le date delle carte di pagamento, anziché elementi personalizzati, per assicurarti che il completamento automatico sia disponibile.

Scopri di più su come aiutare gli utenti a evitare di reinserire i dati di pagamento.

Assicurati che la compilazione automatica funzioni per tutti i campi

Oltre a indirizzi, dati dell'account e dati della carta di credito, ci sono molti altri campi in cui i browser possono aiutare gli utenti con la compilazione automatica.

Quando aggiungi un campo del numero di telefono al modulo, verifica se puoi utilizzare uno dei valori disponibili per il completamento automatico. Hai trovato un valore appropriato per il campo del modulo? Aggiungilo.

L'utilizzo di valori adatti per l'attributo autocomplete aiuta i browser a offrire l'opzione di compilazione automatica migliore e gli utenti a compilare i moduli più velocemente.

Aiutare i browser a capire che un campo non deve essere compilato automaticamente

Hai imparato come funziona la compilazione automatica, come puoi aiutare i browser con la compilazione automatica e perché la compilazione automatica rende più comodo per gli utenti compilare i moduli. A volte, però, non vuoi che i browser offrano il completamento automatico.

<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">

Un caso in cui la compilazione automatica non è utile è l'inserimento di valori unici e una tantum, come un campo per un codice monouso. Il valore è diverso ogni volta e il browser non deve salvare i valori né offrire un'opzione di compilazione automatica. Puoi utilizzare autocomplete="off" per questi campi per impedire la compilazione automatica.

Un altro caso d'uso per autocomplete="off" è un campo honeypot (vedi il modulo precedente). Anche se il campo non è visibile, i browser potrebbero compilarlo automaticamente con il resto dei campi. La disattivazione della compilazione automatica garantisce che un utente reale non venga identificato come bot, perché il campo viene compilato automaticamente.

Dovresti disattivare la compilazione automatica solo se hai la certezza che aiuterà gli utenti.

Verifica la comprensione

Metti alla prova le tue conoscenze sulla compilazione automatica

Risorse

• L'attributo autocomplete.
  • Best practice per il modulo di pagamento e indirizzo