Web Design  »  Articoli  »  Web design 

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.

Altri articoli

Altre guide

Altre newsletter