Codelab sulle best practice per il modulo di registrazione

Sam Dutton

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

Passaggio 1: utilizza un codice HTML significativo

In questo passaggio imparerai a utilizzare gli elementi del modulo per sfruttare al meglio le funzionalità integrate del browser.

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

Dai un'occhiata al codice HTML del tuo modulo in index.html. Vedrai che ci sono campi per nome, email e password. Ognuna fa parte di una sezione e ha un'etichetta. Il pulsante Registrati è… un <button>. Più avanti in questo codelab, scoprirai 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. Questa immagine mostra l'aspetto di un modulo senza CSS, ad eccezione degli stili del browser predefiniti.

  • Gli stili predefiniti sembrano a posto? Cosa cambieresti per migliorare l'aspetto del modulo?
  • Gli stili predefiniti funzionano bene? Quali problemi si potrebbero verificare utilizzando il modulo così com'è? E sui dispositivi mobili? E per gli screen reader o altre tecnologie per la disabilità?
  • Chi sono i tuoi utenti e quali dispositivi e browser scegli come target?

Testa il modulo

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

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

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

Passaggio 2: aggiungi il codice CSS per migliorare il funzionamento del modulo

Fai clic su Visualizza codice sorgente per tornare al codice sorgente.

Finora non c'è nulla di sbagliato con il codice HTML, ma devi assicurarti che il modulo funzioni bene per una serie di utenti su dispositivi mobili e computer.

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

Copia e incolla tutto il seguente CSS nel file css/main.css:

Fai clic su Visualizza app per visualizzare lo stile del modulo di registrazione. Quindi fai clic su Visualizza codice sorgente per tornare a css/main.css.

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

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

  • Il CSS è mobile-first. Le query supporti vengono utilizzate per applicare regole CSS per le aree visibili di almeno 400px di larghezza e poi di nuovo per le aree visibili di almeno 500px di larghezza. Queste interruzioni sono adeguate? Come scegliere i punti di interruzione per i moduli?

Passaggio 3: aggiungi attributi per consentire agli utenti di inserire i dati

In questo passaggio aggiungi attributi agli elementi di input per consentire al browser di memorizzare e compilare automaticamente i valori dei campi del modulo e di avvisare in caso di 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 hanno molte funzioni: * type="password" oscura il testo man mano che viene inserito e consente al gestore delle password del browser di suggerire una password sicura. * type="email" offre una convalida di base e assicura che gli utenti di dispositivi mobili dispongano di una tastiera appropriata. Provaci.

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

Prova a inviare il modulo con un campo vuoto. Il browser non invia 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 inviarla con una password che contiene meno di otto caratteri. Il browser avvisa che la password non è abbastanza lunga e imposta lo stato attivo sull'input della password grazie all'attributo minlength="8". Lo stesso vale per pattern (utilizzato per l'input del nome) e altri vincoli di convalida. Il browser esegue tutto automaticamente, senza bisogno di codice aggiuntivo.

L'utilizzo del valore autocomplete name per l'input Nome completo ha senso, ma che 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 associare alla password. * autocomplete="new-password" per Password è un suggerimento per il gestore delle password che deve offrire di memorizzare questo valore come password per il sito corrente. Potrai quindi utilizzare autocomplete="current-password" per attivare la compilazione automatica in un modulo di accesso (ricorda che questo è un modulo di registrazione).

Passaggio 4: aiuta gli utenti a inserire password sicure

Con il modulo così com'è, hai notato qualcosa di strano con l'inserimento della password?

Esistono due problemi: * Non è possibile sapere se esistono vincoli sul valore della password. * Non puoi vedere la password per verificare se l'hai inserita correttamente.

Non fare in modo che gli utenti debbano 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 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>

Verranno 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 la descrizione.

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

Il CSS è già implementato dal passaggio 2. Dai un'occhiata per vedere come viene impostato lo stile e la posizione del pulsante di attivazione/disattivazione della password.

  • Un'icona sarebbe più efficace del testo per attivare/disattivare la visualizzazione della password? Prova i test di usabilità scontati 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 utilizzando solo ChromeVox? In caso contrario, cosa cambieresti?

A questo punto, il modulo deve avere un aspetto simile al seguente:

Per saperne di più

Questo codelab non copre diverse funzionalità importanti:

  • Controllo della presenza di password compromesse. Non consentire mai le password che sono state compromesse. Puoi (e devi) utilizzare un servizio di controllo delle password per rilevare le password compromesse. Puoi utilizzare un servizio esistente o eseguirlo autonomamente sui tuoi server. Prova Aggiungi il controllo della password al tuo modulo.

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

  • Stile e branding: assicurati che siano in linea con il resto del sito. Quando inseriscono nomi e indirizzi e effettuano il pagamento, gli utenti devono sentirsi a proprio agio, certi di trovarsi ancora nel posto giusto.

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