Codelab sulle best practice per il modulo di registrazione

Mario Bianchi

Questo codelab ti mostra come creare un modulo di registrazione che sia sicuro, accessibile e facile da usare.

Passaggio 1. Utilizza codice HTML significativo

In questo passaggio imparerai a utilizzare gli elementi del modulo per ottenere il massimo dalle funzionalità integrate del browser.

  • Fai clic su Remix per modificare per rendere il progetto modificabile.

Consulta il codice HTML del modulo in index.html. Vedrai che sono stati inseriti nome, email e password. Ciascuno è in una sezione e ognuno ha un'etichetta. Il pulsante Registrati è... un <button>. Più avanti in questo codelab, imparerai i poteri speciali di tutti questi elementi.

<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>

Fai clic su Visualizza app per visualizzare l'anteprima del modulo di registrazione. Qui puoi vedere l'aspetto di un modulo senza CSS diversi dagli stili predefiniti del browser.

  • Gli stili predefiniti sono corretti? Cosa cambieresti per migliorare l'aspetto del modulo?
  • Gli stili predefiniti funzionano correttamente? Quali problemi potrebbero verificarsi utilizzando il modulo così com'è? E i dispositivi mobili? Cosa ne pensi degli screen reader o di altre tecnologie per la disabilità?
  • Chi sono i tuoi utenti e quali dispositivi e browser scegli come target?

Testare il modulo

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

Fai clic su Visualizza app per visualizzare l'anteprima del modulo di registrazione.

  • Prova il modulo su diversi dispositivi utilizzando la modalità dispositivo di Chrome DevTools.
  • Ora apri il modulo su uno smartphone o su altri dispositivi reali. Quali differenze riscontri?

Passaggio 2: aggiungi CSS per migliorare il funzionamento del modulo

Fai clic su Visualizza sorgente per tornare al codice sorgente.

Finora non c'è niente di sbagliato nell'HTML, ma devi assicurarti che il modulo funzioni correttamente per diversi utenti su dispositivi mobili e desktop.

In questo passaggio aggiungerai CSS per semplificare l'utilizzo del modulo.

Copia e incolla tutti i seguenti CSS nel file css/main.css:

Fai clic su Visualizza app per vedere il modulo di iscrizione con lo stile che preferisci. Quindi fai clic su Visualizza sorgente per tornare a css/main.css.

  • Questo CSS funziona con diversi browser e dimensioni di schermo?

  • Prova a regolare padding, margin e font-size in base ai dispositivi di test.

  • Il CSS è orientato ai dispositivi mobili. Le query supporti vengono utilizzate per applicare regole CSS per le aree visibili larghe almeno 400px e poi di nuovo per le aree visibili larghe almeno 500px. Questi punti di interruzione sono adeguati? Come dovresti scegliere i punti di interruzione per i moduli?

Passaggio 3: aggiungi attributi per aiutare gli utenti a inserire i dati

In questo passaggio puoi aggiungere 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 file index.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 type sono molto utili: * type="password" nasconde il testo mentre viene inserito e consente al gestore delle password del browser di suggerire una password efficace. * type="email" offre una convalida di base e garantisce che gli utenti di dispositivi mobili ricevano una tastiera appropriata. Prova!

Fai clic su Visualizza app e quindi sull'etichetta Email. Che cosa succede? Lo stato attivo si sposta sull'input email perché l'etichetta ha un valore for che corrisponde al valore 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 all'etichetta) diventa attivo. Puoi provare a farlo usando l'estensione ChromeVox.

Prova a inviare il modulo con un campo vuoto. Il browser non invierà il modulo e chiede di completare i dati mancanti e imposta lo stato attivo. Il motivo è che hai aggiunto l'attributo require a tutti gli input. Ora prova a inviare con una password di meno di otto caratteri. Il browser avvisa che la password non è abbastanza lunga e imposta lo stato attivo sull'input della password per via dell'attributo minlength="8". Lo stesso vale per pattern (utilizzato per l'input del nome) e altri vincoli di convalida. Il browser fa tutto questo automaticamente, senza bisogno di ulteriore codice.

L'utilizzo del valore autocomplete name per l'input Nome completo ha senso, ma cosa succede agli altri input? * autocomplete="username" per l'input di Email significa che il gestore delle password del browser archivierà l'indirizzo email come "nome" dell'utente (il nome utente) associato alla password. * autocomplete="new-password" per Password è un suggerimento al gestore delle password che suggerisce di memorizzare questo valore come password per il sito corrente. Dopodiché puoi utilizzare autocomplete="current-password" per attivare la compilazione automatica in un modulo di accesso (ricorda che si tratta di un modulo di sign-up).

Passaggio 4: aiuta gli utenti a inserire password sicure

Con il modulo così com'è, hai notato qualcosa di errato nell'inserimento della password?

Ci sono due problemi: * Non è possibile sapere se sono presenti vincoli sul valore della password. * Non riesci a visualizzare la password per controllare se l'hai ricevuta correttamente.

Non far indovinare agli utenti.

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 will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

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.
  • Attributo aria-label per il pulsante di attivazione/disattivazione della password.
  • Un attributo aria-describedby per l'input della password. Gli screen reader leggono il testo dell'etichetta, il tipo di input (password) e la descrizione.

Per attivare il pulsante di attivazione/disattivazione della password e mostrare agli utenti informazioni sui vincoli delle password, copia tutto il codice JavaScript riportato di seguito e incollalo nel tuo file js/main.js.

(Il CSS è già presente nel passaggio 2. Dai un'occhiata per vedere come è definito e posizionato il pulsante di attivazione/disattivazione della password.)

  • Un'icona funzionerebbe meglio di un testo per attivare/disattivare la visualizzazione della password? Prova i test di usabilità degli sconti con un piccolo gruppo di amici o colleghi.

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

A questo punto, l'aspetto del modulo è il seguente:

Ulteriori informazioni

Questo codelab non tratta diverse funzionalità importanti:

  • Controllo della presenza di password compromesse in corso. Non devi mai consentire le password che sono state compromesse. Puoi (e dovresti) utilizzare un servizio di controllo delle password per individuare le password compromesse. Puoi utilizzare un servizio esistente o eseguirne uno autonomamente sui tuoi server. Dalle un'occhiata. Aggiungi il controllo password al modulo.

  • Link ai documenti dei Termini di servizio e delle norme sulla privacy: spiega agli utenti come proteggi i loro dati.

  • Stile e branding: assicurati che corrispondano al resto del sito. Quando inseriscono nomi e indirizzi ed effettuano un pagamento, gli utenti devono sentirsi a proprio agio e confidano di essere nel posto giusto.

  • Analisi e monitoraggio degli utenti reali: consentono di testare e monitorare le prestazioni e l'usabilità del design del modulo per utenti reali.