Codelab sulle best practice per il modulo di registrazione

Sam Dutton

Scopri come creare un modulo di registrazione sicuro, accessibile e più facile da usare. Il modulo finale è disponibile in CodePen.

1. Utilizzare codice HTML significativo

Scopri come utilizzare gli elementi del modulo per sfruttare al meglio le funzionalità integrate del browser.

  1. Crea una nuova Penna.

  2. Copia e incolla il seguente codice nell'editor HTML.

    <form action="#" method="post">
  <h1>Sign up</h1>

  <section>
    <label>Full name</label>
    <input>
  </section>

  <section>
    <label>Email</label>
    <input>
  </section>

  <section>
    <label>Password</label>
    <input>
  </section>

  <button id="sign-up">Sign up</button>
</form>

  3. Fai clic sull'anteprima in tempo reale per visualizzare il modulo HTML. Sono presenti campi per nome, indirizzo email e password. Questo modulo utilizza solo il CSS del browser predefinito.

Ogni input si trova in una sezione e ha un'etichetta. Il pulsante di registrazione è, cosa importante, un <button>. Più avanti in questo codelab, imparerai i poteri speciali di tutti questi elementi.

Poni a te stesso le seguenti domande:

  • Gli stili predefiniti sembrano corretti? Che cosa cambieresti per migliorare l'aspetto del modulo?
  • Gli stili predefiniti funzionano correttamente? Quali problemi potrebbero essere riscontrati utilizzando il tuo modulo così com'è? E sui dispositivi mobili? E per gli screen reader o altre tecnologie assistive?
  • Chi sono i tuoi utenti e quali dispositivi e browser scegli come target?

Testare il modulo

Potresti acquistare molti hardware e configurare un laboratorio di dispositivi, ma esistono modi più economici e semplici per provare il tuo modulo su una gamma di browser, piattaforme e dispositivi:

Apri la visione in diretta di CodePen o visita la nostra visione in diretta. Prova il modulo su diversi dispositivi utilizzando la modalità dispositivo di Chrome DevTools.

Ora apri il modulo su uno smartphone o altri dispositivi reali. Quali differenze noti?

2. Aggiungere CSS per migliorare il funzionamento del modulo

Finora non ci sono problemi con l'HTML, ma devi assicurarti che il modulo funzioni bene per una vasta gamma di utenti su dispositivi mobili e computer.

In questo passaggio, aggiungerai CSS per rendere il modulo più facile da usare. Copia e incolla questo CSS nel file css/main.css.

Fai clic sull'anteprima per visualizzare il modulo di registrazione con lo stile applicato.

Questo CSS funziona per una serie di browser e dimensioni dello schermo?

  • Prova a regolare padding, margin e font-size in base ai tuoi dispositivi di test.
  • Il CSS è mobile-first. Utilizza le query supporti per applicare le regole CSS alle aree visibili con una larghezza di almeno 400px e poi di nuovo per le aree visibili con una larghezza di almeno 500px. Questi breakpoint sono adeguati? Come scegliere i punti di interruzione per i moduli?

3. Aggiungere attributi per aiutare gli utenti a inserire i dati

Aggiungi attributi agli elementi di input per consentire al browser di memorizzare e compilare automaticamente i valori dei campi del modulo e avvisare i campi con dati mancanti o non validi.

Aggiorna il codice HTML in modo che il codice del modulo abbia il seguente aspetto:

<form action="#" method="post">

  <h1>Sign up</h1>

  <section>
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name"
    pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
    type="email" required>
  </section>

  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password"
    type="password" minlength="8" required>
  </section>

  <button id="sign-up">Sign up</button>
</form>

I valori di type svolgono un lavoro importante:

  • type="password" oscura il testo man mano che viene inserito e consente al gestore delle password del browser di suggerire una password efficace.
  • type="email" fornisce una convalida di base e garantisce che gli utenti di dispositivi mobili ricevano una tastiera appropriata.

Nell'anteprima, fai clic sull'etichetta Email. Che cosa succede? Il focus si sposta sull'input email perché l'etichetta ha un valore for che corrisponde al id dell'input email. Le altre etichette e gli altri input funzionano allo stesso modo. Gli screen reader annunciano anche il testo dell'etichetta quando l'etichetta (o l'input associato) riceve lo stato attivo.

Prova a inviare il modulo con un campo vuoto. Il browser non invia il modulo, chiede di completare i dati mancanti e imposta lo stato attivo. Questo perché abbiamo aggiunto l'attributo require a tutti gli input.

Ora prova a inviare una password con meno di otto caratteri. Il browser avvisa che la password non è abbastanza lunga e imposta lo stato attivo sull'input della password a causa dell'attributo minlength="8". Lo stesso vale per pattern (utilizzato per l'input del nome) e altri vincoli di convalida. Il browser esegue tutto questo automaticamente, senza bisogno di codice aggiuntivo.

L'utilizzo del valore autocomplete name per l'input Nome completo ha senso, ma cosa dire degli altri input?

  • autocomplete="username" per l'input Email indica che il gestore delle password del browser memorizzerà l'indirizzo email come "nome" per questo utente (il nome utente!) da abbinare alla password.
  • autocomplete="new-password" per Password è un suggerimento per il gestore delle password che dovrebbe offrire di memorizzare questo valore come password per il sito corrente. Puoi quindi utilizzare autocomplete="current-password" per attivare il riempimento automatico in un modulo di accesso. Ricorda che questo è un modulo di registrazione.

4. Aiutare gli utenti a inserire password sicure

Hai notato qualcosa di strano nell'inserimento della password? Esistono due problemi:

  • Non è possibile sapere se esistono vincoli sul valore della password.
  • Non puoi vedere la password per verificare se è corretta.

Non costringere gli utenti a indovinare. Aggiorna la sezione della password di index.html con il seguente codice:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button"
  aria-label="Show password as plain text. Warning: this displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

In questo modo vengono aggiunte nuove funzionalità per aiutare gli utenti a inserire le password:

  • Un pulsante (in realtà solo testo) per attivare/disattivare la visualizzazione della password. (La funzionalità del pulsante verrà aggiunta con JavaScript.)
  • Un attributo aria-label per il pulsante di attivazione/disattivazione della password.
  • Un attributo aria-describedby per l'inserimento della password. Gli screen reader leggono il testo dell'etichetta, il tipo di input (password) e poi la descrizione.

Per attivare il pulsante di attivazione/disattivazione della password e mostrare agli utenti informazioni sui vincoli della password, copia il codice JavaScript e incollalo nell'editor JavaScript.

  • Un'icona sarebbe più adatta del testo per attivare/disattivare la visualizzazione della password? Prova Test di usabilità scontati con un piccolo gruppo di amici o colleghi.

  • Per provare come funzionano gli screen reader con i moduli, installa l'estensione ChromeVox e naviga nel modulo. Potresti compilare il modulo utilizzando solo ChromeVox? In caso contrario, cosa cambieresti?

Vai oltre

Questo codelab non tratta diverse funzionalità importanti:

  • Controllo della presenza di password compromesse. Non devi mai consentire password che sono state compromesse. Puoi (e devi) utilizzare un servizio di controllo delle password per rilevare le password compromesse.

  • Link ai documenti relativi ai Termini di servizio e alle norme sulla privacy. Spiega chiaramente agli utenti come proteggi i loro dati.

  • Aggiorna lo stile e il brand dei tuoi moduli per assicurarti che corrispondano al resto del tuo sito. In questo modo, gli utenti si sentono a loro agio e sicuri di trovarsi nel posto giusto quando inseriscono nomi e indirizzi e, soprattutto, quando effettuano pagamenti.

  • Aggiungi Analytics e il monitoraggio degli utenti reali. Consente di testare e monitorare le prestazioni e l'usabilità del design del modulo per gli utenti reali.