I form costituiscono il punto di contatto tra un sito e i suoi visitatori.
Questo articolo, primo di una serie dedicata all'argomento, è dedicato alla marcatura
essenziale e supplementare dei moduli. Vedremo, in pratica, quali elementi
del linguaggio HTML sono necessari al fine di migliorarne alcuni aspetti relativi
all'usabilità e soprattutto all'accessibilità.
Elementi di usabilità dei form
Iniziamo con una premessa sull'usabilità. Ci sono principalmente tre tipologie
di form:
- Form di contatto - richiesta informazioni
- Form di registrazione
- Form di ordine
Quale che sia la tipologia di form che disporrete nelle vostre pagine, una
buona regola di progettazione è mettervi per un attimo dall'altra parte del
sito, ossia nei panni dell'utente. I form devono prima di tutto essere chiari:
per ogni campo l'utente dovrebbe capire subito cosa dovrà immettere, non dimenticando
mai di evidenziare i campi obbligatori. I form dovrebbero anche essere ben
organizzati: suddividere logicamente e visivamente gruppi di campi di input
aiuta il visitatore a non disorientarsi. Infine, i form dovrebbero essere lunghi
quanto basta: ossia, contenere solo il numero minimo di campi necessari allo
scopo del form. Vi sarà capitato di abbandonare moduli di registrazione per una
semplice casella di posta in cui vi veniva richiesto, per esempio, il numero di
cellulare o l'ammontare del vostro stipendio!
La marcatura accessibile dei form
Credo che la maggior parte dei lettori conosca gli elementi dei form e i relativi
tag. Per non ripetermi, rimando alla Guida ad HTML sezione sui form. Ci tengo a precisare che tutti gli esempi che
vedremo saranno scritti in HTML 4.01 strict e che molti tag relativi ai
form non hanno chiusura. Mi raccomando di chiuderli se scrivete le vostre pagine
in XHTML.
Il tag label
Il tag label serve ad etichettare un elemento di input di un form.
Per associare una label al corrispondente campo di input, è indispensabile usare
l'attributo for, specificando come valore l'id di tale
campo.Ecco un esempio:
<label for="cognome">Cognome: </label><input type="text" id="cognome">
Vediamo come rende:
Da notare come, cliccando sulla label, si ottiene il focus sul campo di input.
Ogni input dovrebbe avere associata una relativa label e nell'ordine di
codice il campo di input dovrebbe seguire immediatamente l'etichetta, così da
avvantaggiare utenti che navigano con browser testuali o screen reader.
È possibile, inoltre, includere nel corpo della label il campo di input
stesso:
<label for="cognome">Cognome: <input type="text" id="cognome"></label>
Questo consente di avere un contenitore aggiuntivo per ciascun campo di input
e aggiungere interessanti possibilità di personalizzazione, come vedremo più avanti.
Una piccola nota pratica: per processare i dati immessi dall'utente
è necessario disporre dell'attributo name per ogni campo di input,
mentre per associare le label è necessario l'id. Nel caso di campi
singoli si può tranquillamente usare lo stesso valore per l'id e per name.
Per campi quali checkbox e radiobutton, è necessario invece adottare lo stesso
name (per correlarli), ma si dovrà usare un id diverso: un id, infatti,
dovrà essere unico nella pagina HTML. Sia per i nomi che per gli id compositi
sarebbero da evitare trattini e underscore: i primi possono dare problemi per
la programmazione, i secondi per i CSS.
I tag fieldset e legend
Il tag fieldset serve per raggruppare logicamente campi di input.
Come primo elemento contenuto all'interno di un fieldset ci deve
essere una legend, ossia un testo che descrive lo scopo del fieldset
stesso. Fieldset (e la relativa legend) all'interno dei form sono
opzionali, ma altamente consigliati. Il loro uso ha due principali vantaggi:
- strutturare meglio i form;
- orientare l'utente verso i dati da immettere.
Vediamo un esempio. I due gruppi di checkbox qui di seguito sono stati realizzati
con codice HTML quasi minimale. Eccolo:
<fieldset id="fsisop">
<legend>Sistema Operativo</legend>
<label for="sowin">Windows
<input type="radio" name="so" id="sowin">
</label><br>
<label for="somac">MacIntosh
<input type="radio" name="so" id="somac">
</label><br>
<label for="solin">Linux
<input type="radio" name="so" id="solin">
</label><br>
</fieldset>
<fieldset id="fmonitor">
<legend>Risoluzione monitor</legend>
<label for="mon15">15 pollici
<input type="radio" name="mon" id="mon15">
</label><br>
<label for="mon19">19 pollici
<input type="radio" name="mon" id="mon19">
</label><br>
<label for="mon21">21 pollici o più
<input type="radio" name="mon" id="mon21">
</label><br>
</fieldset>
Senz'altro i <br> sono il modo più semplice per mandare
a capo gli elementi di una form, ma non sono l'unico, come vedremo nei prossimi
appuntamenti. Vediamo come rende l'HTML di sopra senza aggiunta di stile:
tabindex
All'utente può venire utile poter navigare attraverso il form con la tastiera,
così da poterlo compilare senza dover usare il mouse. Il tasto tab consente di
farlo, passando attraverso link e gli elementi di form. Se non specificato altrimenti,
l'ordine di tabulazione di link e campi di input seguirà l'ordine di codice HTML.
Per poter assegnare un ordine arbitrario, e per esempio attribuire agli elementi
di un form un indice di tabulazione prioritario, si può definire un tabindex in
questo modo:
<label for="cerca" >Cerca nel sito:
<input id="cerca" tabindex=1 name="cerca">
</label>
Ecco come rende:
In questo modo la funzione Cerca nel sito sarà la prima in ordine di
tabulazione nella pagina e i restanti link ed elementi di form (input
e textarea) seguiranno l'ordine di tabulazione del flusso di caratteri
della pagina, partendo dall'inizio. Per questo motivo, se vogliamo assegnare un
tabindex al primo elemento di un form, dovremo attribuire gli indici successivi
agli altri elementi, in ordine di immissione dei dati.
accesskey e title
Come per i link, anche i campi di input di un form possono avere accesskey
e title. Entrambi gli attributi possono essere assegnati sia agli
elementi di input che alle label. A parer mio, l'attributo title è più indicato
per le label, mentre l'accesskey andrebbe specificato sul campo di input. Vediamone
un esempio:
<label for="telefono" title="Il numero di telefono compreso di prefisso">
Telefono:
<input type="text" id="telefono" name="telefono" accesskey="T">
</label>
Anche qui vediamo il risultato:
Da notare che premendo i tasti Alt+T il campo di input specificato ottiene
il focus.
Sui campi di input
Laddove non sia possibile, per questioni di layout o di spazio, usare fieldset
e legend o una label, è indispensabile usare l'attributo value per
campi di input. Ecco un esempio:
<input id="find" name="find" value="Cerca
nel sito">
<input type="submit" value="vai">
Ecco come rende:
Questa regola, tra l'altro, è esplicitamente dettata tra i punti di
controllo delle Linee Guida sull'Accessibilità (checkpoint 10.4).
Per campi di input di dimensione nota, come per esempio un codice di avviamento postale, è consigliabile
fissare dimensione e dimensione massima (il cui valore esprime il numero di caratteri),
attraverso gli attributi size e maxlength. Esempio:
<label for="cap" title="Codice Avviamento postale">
CAP:
<input type="text" id="cap" name="cap" size=5 maxlength=5>
</label>
Ecco come rende:
Sui gruppi di elementi a scelta singola o multipla
Due parole sui gruppi di input. Per checkbox e radiobutton, se uno dei possibili
valori è decisamente il più selezionato dagli utenti, è possibile impostarlo via
codice attraverso l'attributo checked. Attenzione però: in alcuni
casi questo può disturbare l' utente.
Per i campi come le select (menu a tendina), nel caso in cui i valori siano
molti è consigliabile usare gli optgroup.
Evidenziare campi obbligatori in un form
Un'ultima annotazione su come evidenziare i campi necessari di un form. Per
questioni di accessibilità verso screen reader e text browser, sarebbe bene non
affidare l'evidenziazione dei campi obbligatori esclusivamente ai fogli di stile.
In sostanza, per marcare in maniera accessibile un campo obbligatorio il modo
migliore è senz'altro renderlo parte del contenuto. Un modo semplice,
piuttosto che aggiungere ad ogni label del testo ridondante tipo "campo obbligatorio",
è aggiungere un semplice asterisco rosso davanti ai campi obbligatori.
Usando una simile soluzione è fondamentale informare l utente di tale "regola".
Vediamo brevemente una possibile implementazione di questo approccio:
<fieldset>
<legend>Dati personali</legend>
<p>I campi contrassegnati da un asterisco rosso (<strong class="asterisco">*</strong>) sono obbligatori</p>
<label for="email" class="required"><strong>* </strong>email:
<input type="text" id="email" name="email">
</label>
</fieldset>
A questo punto intervengono i fogli di stile. Bastano due regole essenziali
per rendere l'asterisco rosso in entrambi i casi. Da notare che l'attribuzione
della classe required sulla label è indicativa e consente ulteriori personalizzazioni
del campo obbligatorio:
label.required strong, strong.asterisco{
font-family: Verdana,Arial,sans-serif;color: red}
Vediamo il risultato:
Focus su un form con Javascript
In alcuni casi anche Javascript può contribuire a migliorare l'usabilità di
un form. Conosciamo tutti Google.
Quando la pagina è caricata, il cursore è già pronto per immettere il testo da
ricercare, senza dover entrare nel campo di input con il mouse. Supponendo che
il campo di input abbia id="cerca", una semplice riga di javascript
aggiunta nella sezione head della vostra pagina consente di attribuire
il focus all'input al caricamento della pagina:
<script type="text/javascript">
onload=function() {document.getElementById("cerca").focus()}
</script>
Vediamo il risultato.
Conclusioni
Termina qui la prima parte. Il concetto di fondo è che per realizzare un buon
form, il primo passo è un buon codice HTML. Ma anche una buona presentazione
e disposizione degli elementi sono fattori importanti. Saranno l'argomento del
prossimo articolo.
