Dover reinserire il tuo indirizzo per la decima volta è faticoso. I browser e tu, in qualità di sviluppatore, potete aiutare gli utenti a inserire i dati più velocemente ed evitare di doverli reinserire.
Questo modulo ti insegna come funziona la compilazione automatica e in che modo autocomplete e altri attributi degli elementi 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?
La compilazione dei moduli non è un'attività interessante, ma è comunque un'attività che svolgi spesso. Nel corso del tempo si compilano molti moduli e spesso si compilano gli stessi dati. Un modo per aiutare gli utenti a compilare più velocemente i moduli è offrire loro la possibilità di compilare automaticamente i campi dei moduli con dati inseriti in precedenza. Questa è la compilazione automatica.
Come fanno i browser a sapere quali dati compilare automaticamente? Per scoprirlo, dai un'occhiata a un campo di modulo di esempio.
<label for="name">Name</label>
<input name="name" id="name">
Se invii questo campo del modulo, i browser memorizzano il valore (i dati inseriti) insieme al valore dell'attributo name (nome). Alcuni browser esaminano anche
l'attributo id durante l'archiviazione e l'inserimento dei dati.
Ad esempio, alcune settimane dopo compili un altro modulo su un altro sito web. Questo sito contiene anche un campo del modulo con name="name". Ora il browser offre la compilazione automatica,
perché il valore del nome è già memorizzato.
La compilazione automatica è particolarmente utile nei moduli che utilizzi regolarmente, ad esempio registrazione, accesso, pagamento, pagamento 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.
Nel tuo browser è già stato salvato un indirizzo? Bene. Dopo aver interagito con il primo campo del modulo degli indirizzi, il browser mostra un elenco di indirizzi salvati. Puoi sceglierne uno e il browser compila tutti i campi relativi all'indirizzo. La compilazione automatica semplifica e velocizza la compilazione di moduli.
Non tutti i moduli dell'indirizzo hanno gli stessi campi e anche l'ordine dei campi varia.
Se utilizzi i valori corretti per autocomplete, il browser inserirà i valori corretti per un modulo. Esistono valori per country, postal-code
e molti
altri.
Assicurati che gli utenti possano accedere velocemente e usa password sicure
Molte persone non sono brave a ricordare le password. La password più comune è "123456", seguita da altre combinazioni facili da ricordare. Come puoi usare password univoche e sicure senza doverle ricordare tutte?
I browser dispongono di gestori delle password integrati che consentono di generare, salvare e inserire le password automaticamente. Scopri come aiutare i browser con la compilazione automatica delle email e la gestione delle password.
Puoi utilizzare autocomplete="email" come campo email, in modo che gli utenti possano usare l'opzione di compilazione automatica per un indirizzo email.
Poiché si tratta di un modulo di registrazione, gli utenti non dovrebbero avere la possibilità di inserire
password utilizzate in precedenza. Puoi usare autocomplete="new-password" per assicurarti che i browser offrano l'opzione per generare una nuova password.
Nel modulo di accesso, puoi usare autocomplete="current-password" per indicare ai browser di offrire la possibilità di inserire 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 bello se il codice che hai ricevuto nell'SMS venisse suggerito
dalla tastiera sullo schermo e potessi selezionarlo direttamente per inserire il
valore? Su Safari 14 o versioni successive, puoi utilizzare autocomplete="one-time-code" per ottenere questo risultato. In Chrome su 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 i moduli OTP SMS.
Aiutare gli utenti a inserire i dati della carta di credito
Su molti siti web di e-commerce, puoi utilizzare la carta di credito per acquistare i prodotti. I siti potrebbero utilizzare piattaforme di pagamento di terze parti che forniscono i propri moduli, ma se hai bisogno di creare moduli di pagamento personalizzati, assicurati che gli utenti possano inserire facilmente i dati di pagamento.
Puoi utilizzare nuovamente 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 una singola immissione per i numeri, come numeri di carte di credito e numeri di telefono, per assicurarti che i browser offrano la compilazione automatica. Utilizza elementi standard del modulo, ad esempio <select> per le date delle carte di pagamento, anziché elementi personalizzati, per garantire che sia disponibile il completamento automatico.
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 relativo al numero di telefono al modulo, controlla se puoi utilizzare uno qualsiasi dei valori disponibili per il completamento automatico. Hai trovato un valore appropriato per il campo del modulo? Aggiungila.
L'utilizzo di valori adatti per l'attributo autocomplete consente ai browser di offrire
la migliore opzione di compilazione automatica e agli utenti di compilare più rapidamente i moduli.
Aiuta i browser a capire che un campo non deve essere compilato automaticamente
Hai imparato come funziona la compilazione automatica, come aiutare i browser con la compilazione automatica e perché la compilazione automatica consente agli utenti di compilare facilmente i moduli. A volte, però, non vuoi che i browser offrano la compilazione automatica.
<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">
Quando la compilazione automatica non è utile, è possibile inserire valori univoci una tantum,
ad esempio un campo di codice monouso. Il valore è sempre diverso e il browser non dovrebbe 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 gli altri campi. La disattivazione della compilazione automatica garantisce che un utente reale non venga identificato come bot, in quanto il campo viene completato automaticamente.
Dovresti disattivare la compilazione automatica solo se hai la certezza che aiuterà gli utenti.
Verifica le tue conoscenze
Verifica le tue conoscenze della compilazione automatica
Quale valore di completamento automatico dovresti utilizzare per il campo della password in un modulo di registrazione?
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"