Basi dei moduli

Fai clic sulla parola Email accanto a un campo di un modulo ben costruito e il cursore salta nella casella. Quel piccolo dettaglio è l'elemento label che fa il suo lavoro.

Che cosa fa un modulo

Caselle di ricerca, pagine di iscrizione e schermate di pagamento sono tutti moduli. Un elemento <form> raggruppa i controlli, e quando il visitatore lo invia, il browser manda il name di ogni controllo insieme al suo valore all'indirizzo indicato nell'attributo action del modulo. L'attributo method dice come: get mette i dati nell'indirizzo, adatto alle ricerche che potresti salvare nei segnalibri, mentre post li invia nel corpo della richiesta, adatto a tutto ciò che modifica dati, come un ordine. L'HTML costruisce il modulo; un programma sul server decide che cosa fare con ciò che arriva.

<form action="/subscribe" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" autocomplete="name">

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

  <button type="submit">Subscribe</button>
</form>

Ogni controllo ha bisogno di una label

L'elemento <label> dà un nome a un controllo. Collega i due dando all'input un id e alla label un attributo for corrispondente, oppure mettendo l'input dentro la label. Il collegamento fa due cose. Gli screen reader leggono la label quando il campo riceve il focus, così l'utente sente Email, testo modificabile invece di un semplice testo modificabile. E il clic sulla label mette il focus sul campo o spunta la casella, il che offre a tutti, specialmente a chi usa un telefono, un bersaglio più grande. Un placeholder (testo grigio di suggerimento dentro la casella) non è una label: sparisce appena scrivi, spesso ha poco contrasto e alcune tecnologie assistive lo ignorano.

Tipi di input

L'attributo type di <input> cambia il controllo. text è la casella predefinita su una riga. email, tel e url sembrano simili ma sui telefoni mostrano una tastiera adatta, e il browser controlla che un indirizzo email abbia la forma giusta. number accetta cifre e può avere min e max. password nasconde ciò che scrivi, date offre un calendario, e checkbox e radio sono caselle da spuntare. Per un testo più lungo usa <textarea>, e per una scelta da un elenco <select> con elementi <option> al suo interno.

Raggruppare le scelte

I pulsanti di opzione (radio) che appartengono alla stessa domanda hanno lo stesso name, e se ne può scegliere solo uno alla volta. Racchiudi il gruppo in <fieldset> e metti la domanda in <legend>. Uno screen reader legge allora la domanda insieme a ogni opzione: Loaf size, Small, pulsante di opzione, 1 di 2. Ogni pulsante di opzione ha comunque la sua label.

Pulsanti e controlli integrati

Un <button> dentro un modulo lo invia per impostazione predefinita; scrivere type="submit" lo rende esplicito, e type="button" crea un pulsante che non fa nulla finché JavaScript non gli dà un compito. Prima dell'invio, il browser può controllare i campi per te. required blocca il modulo se il campo è vuoto, type="email" rifiuta un testo senza @, e minlength, min e max fissano dei limiti. Questi controlli aiutano il visitatore a correggere presto gli errori, ma vengono eseguiti nel suo browser e si possono aggirare, quindi il server deve controllare di nuovo i dati. L'attributo autocomplete, con valori come email o name, permette al browser di inserire i dati salvati, il che fa risparmiare digitazione a tutti e aiuta soprattutto le persone con difficoltà motorie o di memoria.