Crea un modulo che consenta agli utenti di inserire i dati dell'indirizzo nel modo più semplice possibile su computer e dispositivi mobili. Assicurati che il modulo sfrutti al meglio le funzionalità integrate del browser per la compilazione automatica, la convalida e i vincoli di inserimento dei dati.
Come implementare
Di seguito sono riportate le linee guida più importanti per creare moduli di indirizzo efficaci.
Utilizza codice HTML valido e significativo
Sfrutta al meglio gli elementi e gli attributi creati per la creazione di moduli:
<form>,<input>,<label>e<button>type,autocompleteeinputmode
Questi attributi attivano la funzionalità integrata del browser, migliorano l'accessibilità e aggiungono significato al markup.
Utilizza l'elemento <label> per etichettare i campi del modulo per l'inserimento dei dati
Per etichettare un elemento <input>, <select> o <textarea>, utilizza un elemento <label>. Associa un'etichetta a un input assegnando all'attributo for dell'etichetta lo stesso valore dell'attributo id dell'input.
Sfrutta al massimo gli attributi HTML
Semplifica l'inserimento dei dati da parte degli utenti utilizzando l'attributo <type> dell'elemento <input> appropriato per fornire la tastiera corretta sui dispositivi mobili e attivare la convalida di base integrata nel browser.
Utilizza sempre type="email" per gli indirizzi email e type="tel" per i numeri di telefono.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Ogni elemento <input>, <select> e <textarea> DOVREBBE avere un attributo autocomplete appropriato per migliorare l'accessibilità e aiutare gli utenti a evitare di reinserire i dati.
Crea pulsanti utili
Utilizza <button> per i pulsanti. Puoi anche utilizzare <input type="submit">, ma non utilizzare div o un altro elemento casuale che funge da pulsante. Gli elementi dei pulsanti forniscono un comportamento accessibile, una funzionalità di invio dei moduli integrata e possono essere facilmente personalizzati.
Assegna a ogni pulsante di invio del modulo un valore che ne descriva la funzione. Per ogni passaggio verso il pagamento, utilizza un invito all'azione descrittivo che mostri l'avanzamento e renda evidente il passaggio successivo. Ad esempio, etichetta il pulsante di invio nel modulo dell'indirizzo di consegna con Procedi al pagamento anziché con Continua o Salva.
Se possibile, utilizza un unico campo per il nome
Consenti agli utenti di inserire il proprio nome utilizzando un unico campo di immissione, a meno che tu non abbia un buon motivo per memorizzare separatamente nomi, cognomi, titoli onorifici o altre parti del nome. L'utilizzo di un unico campo per il nome rende i moduli meno complessi, consente il taglia e incolla e semplifica la compilazione automatica.
Consenti nomi internazionali. Per la convalida, evita di utilizzare espressioni regolari che corrispondono solo ai caratteri latini. Solo caratteri latini esclude gli utenti con nomi o indirizzi che includono caratteri non presenti nell'alfabeto latino. Consenti invece la corrispondenza delle lettere Unicode e assicurati che il tuo backend supporti Unicode in modo sicuro sia come input che come output. Unicode nelle espressioni regolari è ben supportato dai browser moderni.
Consenti una varietà di formati di indirizzo
Quando crei un modulo per l'indirizzo, tieni presente la varietà di formati degli indirizzi, anche all'interno di un singolo paese. Non fare supposizioni sugli indirizzi "normali".
Se possibile, utilizza un singolo elemento <textarea> per l'indirizzo.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
Questa è l'opzione più flessibile per una varietà di formati di indirizzi locali e internazionali.
Se il tuo modello di dati richiede righe di indirizzo separate, utilizza un <input> per riga con i token autocomplete address-line1, address-line2 (e, se necessario, address-line3) in modo che la compilazione automatica continui a funzionare. Non suddividere l'indirizzo in input privi di questi token e rendi obbligatoria solo la prima riga.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
Aiuta gli utenti a evitare di omettere accidentalmente campi di dati
Aggiungi l'attributo required ai campi obbligatori.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
Strategie di riserva
La compilazione automatica è un potenziamento progressivo. Nei browser che non supportano la compilazione automatica, gli utenti dovranno semplicemente inserire manualmente i dettagli dell'indirizzo. I vincoli HTML semantici (come type, inputmode e required) continueranno a funzionare correttamente come convalida dei moduli standard.