Codelab sulle best practice per il modulo di registrazione

Sam Dutton

Questo codelab ti mostra come creare un modulo di registrazione che sia 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 modulo in index.html. Vedrai che ci sono input 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. Questo ti mostra l'aspetto di un modulo senza altri CSS stili predefiniti del browser.

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

Testa il modulo

Potresti acquisire molto hardware e configurare sui dispositivi, ma modi più semplici e più economici per provare il 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 vedi?

Passaggio 2: aggiungi CSS per migliorare il funzionamento del modulo

Fai clic su Visualizza sorgente per tornare al codice sorgente.

Non c'è niente di sbagliato nel codice HTML finora, ma devi assicurarti che il modulo funzioni correttamente per un di utenti di dispositivi mobili e computer 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 visualizzare lo stile del modulo di registrazione. Poi fai clic su Visualizza sorgente per tornare a css/main.css.

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

  • Prova a regolare padding, margin e font-size per adattarli ai tuoi dispositivi di test.

  • Il CSS è incentrato sui dispositivi mobili. Query multimediali vengono utilizzate per applicare regole CSS per aree visibili con larghezza minima di 400px e poi di nuovo per aree visibili con larghezze pari ad almeno 500px. Questi punti di interruzione sono adeguate? Come si scelgono 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 archiviare e compilare automaticamente valori dei campi del modulo e avvisi per 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 hanno un grande impatto: * type="password" oscura il testo inserito e attiva l'impostazione Gestore delle password per suggerire una password efficace. * type="email" offre una convalida di base e assicura che gli utenti di dispositivi mobili dispongano di una tastiera appropriata. Prova fallo!

Fai clic su Visualizza app e poi sull'etichetta Email. Che cosa succede? Lo stato attivo si sposta sull'email input perché l'etichetta ha un valore for che corrisponde a id dell'input email. Le altre etichette e funzionano allo stesso modo. Gli screen reader annunciano il testo dell'etichetta anche quando l'etichetta (o il suo l'input associato) ottiene lo stato attivo. Puoi provare a usare l'estensione ChromeVox.

Prova a inviare il modulo con un campo vuoto. Il browser non invierà il modulo e chiederà di: dati mancanti completi e imposta l'attenzione. Il motivo è che hai aggiunto l'attributo require a tutti i di 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'inserimento della password a causa del minlength="8" . Lo stesso funziona per pattern (utilizzato per l'input del nome) e altre vincoli di convalida. Il browser esegue tutte queste operazioni automaticamente, senza bisogno di altro codice.

Utilizzare il valore name dell'elemento autocomplete per l'input Nome completo ha senso, ma altri input? * autocomplete="username" per l'input Email significa che il gestore delle password del browser memorizzerà l'indirizzo email come "nome" per questo utente (il nome utente!) di accompagnare la password. * autocomplete="new-password" per Password indica a Gestore delle password che deve propone di memorizzare questo valore come password per il sito corrente. Puoi quindi utilizzare autocomplete="current-password" per attivare la compilazione automatica in un modulo di accesso (ricorda che si tratta di registrazione).

Passaggio 4: aiuta gli utenti a inserire password sicure

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

Esistono due problemi: * Non c'è modo di sapere se ci sono vincoli al valore della password. * Non puoi controllare la password per verificare se è corretta.

Non indurre gli utenti a indovinare!

Aggiorna la sezione delle 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>

Questa operazione aggiunge nuove funzionalità per aiutare gli utenti a inserire le password:

  • Un pulsante (in realtà solo testo) per attivare/disattivare la visualizzazione della password. (La 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. Screen reader leggi 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 relativi alle password, copia tutto il codice JavaScript riportato di seguito e incollalo nel tuo file js/main.js.

Il CSS è già impostato nel passaggio 2. Dai un'occhiata per vedere come funziona il pulsante di attivazione/disattivazione della password con stile e posizionamento.)

  • Un'icona potrebbe funzionare meglio del testo da mostrare Attivare/disattivare la visualizzazione della password? Prova i test di usabilità degli sconti con un piccolo gruppo di amici o colleghi.

  • Per scoprire come gli screen reader utilizzano 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:

Andamento successivo

Questo codelab non tratta diverse funzionalità importanti:

  • Controllo della presenza di password compromesse. Non consentire mai 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. Prova Aggiungi password al modulo.

  • Link ai tuoi Termini di servizio e ai documenti delle norme sulla privacy: chiarisci agli utenti in che modo per salvaguardare i propri dati.

  • Stile e branding: assicurati che corrispondano al resto del tuo sito. Quando si inseriscono nomi e indirizzi e effettuando il pagamento, gli utenti devono sentirsi a proprio agio, confidando di essere ancora nel posto giusto.

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