Dover reinserire l'indirizzo per la decima volta è faticoso. Browser e tu,
in qualità di sviluppatore, può aiutare gli utenti a inserire i dati più velocemente ed evitare di reinserirli.
Questo modulo insegna come funziona la compilazione automatica, come autocomplete e altre
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 la compilazione automatica. Perché i browser offrono la compilazione automatica?
La compilazione di moduli non è un'attività interessante, ma è comunque un'attività da svolgere spesso. Con il passare del tempo compili molti moduli e spesso inserisci 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 i dati precedentemente inseriti. Si tratta di compilazione automatica.
Come fanno i browser a sapere quali dati compilare automaticamente? Dai un'occhiata a un modulo di esempio campo 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 inseriti)
insieme al valore dell'attributo name (nome). Alcuni browser esaminano anche
l'attributo id durante l'archiviazione e la compilazione dei dati.
Supponiamo che settimane dopo compili un altro modulo su un altro sito web. Questo sito include inoltre
contiene un campo del modulo con name="name". Ora il browser può offrire la compilazione automatica,
perché esiste già un valore per il nome.
La compilazione automatica è particolarmente utile nei moduli che utilizzi regolarmente, ad esempio i moduli di registrazione accesso, pagamento, pagamento e moduli in cui devi inserire il tuo nome o .
Puoi aiutare i browser a offrire le migliori opzioni di compilazione automatica usando
valori per l'attributo autocomplete. Esistono molti valori possibili per autocomplete. Ecco un esempio di indirizzi.
Nel tuo browser è già salvato un indirizzo? Bene. Dopo interagisci con il primo campo del modulo dell'indirizzo, il browser mostra un elenco di indirizzi salvati. Puoi sceglierne una e il browser compila tutti i campi correlati all'indirizzo. Compilazione automatica dei moduli è semplice e veloce.
Non tutti i moduli di indirizzo contengono 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
altro ancora.
Assicurati che gli utenti possano accedere rapidamente e utilizzare password sicure
Molte persone non sanno ricordare le password. Il metodo più comune password è "123456", seguito da altre combinazioni facili da ricordare. Come puoi utilizzare password sicure e univoche senza memorizzarle tutte?
I browser dispongono di gestori delle password integrati per generare, salvare e compilare password per te. Scopri come aiutare i browser con la compilazione automatica delle email e la gestione delle password.
Puoi utilizzare autocomplete="email" per un campo email, in modo che gli utenti ricevano la compilazione automatica
per un indirizzo email.
Poiché si tratta di un modulo di registrazione, gli utenti non dovrebbero avere la possibilità di compilarlo in precedenza
le password usate. Puoi utilizzare autocomplete="new-password" per assicurarti che i browser
offrono la possibilità di generare una nuova password.
Nel modulo di accesso, puoi usare autocomplete="current-password" per comunicare
browser per 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 sezione una password, viene inviato un codice monouso tramite SMS o un'app di autenticazione a due fattori.
Non sarebbe fantastico se ti venisse suggerito il codice che hai ricevuto nell'SMS
con la tastiera sullo schermo e puoi selezionarla direttamente per compilare
? Su Safari 14 o versioni successive, puoi utilizzare
autocomplete="one-time-code"
per raggiungere questo obiettivo. In Chrome su Android, puoi utilizzare lo strumento WebOTP
API per ottenere
usando JavaScript.
Scopri di più su come verificare i numeri di telefono sul web con il modulo OTP via SMS best practice.
Aiuta 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 prodotti. I siti possono utilizzare piattaforme di pagamento di terze parti che forniscono i propri moduli, ma se devi creare le tue forme di pagamento, assicurati che gli utenti possano compilare dati di pagamento.
Puoi utilizzare nuovamente l'attributo autocomplete per assicurarti che i browser offrano l'attributo
le opzioni di compilazione automatica corrette.
Esistono valori per il numero della carta di credito cc-number, la scadenza della carta di credito
data cc-exp e tutte le altre informazioni
necessaria
per un pagamento con carta di credito.
Utilizza un'unica immissione per numeri come numeri di carte di credito e numeri di telefono
numeri, per assicurarti che i browser offrano la compilazione automatica. Utilizza elementi di modulo standard,
ad esempio, un <select> per le date delle carte di pagamento, anziché gli elementi personalizzati, per
per assicurarsi che il completamento automatico sia disponibile.
Scopri di più su come aiutare gli utenti a evitare di inserire nuovamente il pagamento i tuoi dati.
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 il campo del numero di telefono al modulo, verifica se puoi utilizzare uno dei disponibile per il completamento automatico. Hai trovato un valore appropriato per il campo del modulo? Aggiungilo.
L'utilizzo di valori adatti per l'attributo autocomplete consente ai browser di offrire
la migliore opzione di compilazione automatica
e aiuta gli utenti a compilare i moduli più velocemente.
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ò, 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">
Una posizione in cui la compilazione automatica non è utile è quando si inseriscono valori univoci una tantum
ad esempio un campo monouso. Il valore è sempre diverso 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 di autocomplete="off" è il campo honeypot (vedi precedente
del modulo). Anche se il campo non è
visibile, i browser potrebbero compilarlo
automaticamente con gli altri campi. Attivazione della compilazione automatica
la disattivazione garantisce che un utente reale non venga identificato come bot, poiché il campo
vengono completate automaticamente.
Dovresti disattivare la compilazione automatica solo se hai la certezza che aiuterà gli utenti.
Verifica le tue conoscenze
Verifica le tue conoscenze sulla compilazione automatica
Quale valore di completamento automatico dovresti usare per il campo della password in un modulo di registrazione?
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"