Realizzare un form accessibile con XHTML e CSS

Cominciamo a vedere il file di esempio finale e poi passiamo alla spiegazione del codice.

Intanto possiamo dare uno sguardo al file senza la formattazione, dei Fogli di Stile. Visto che differenza? Procediamo con ordine; il codice che ci permette di avere un bel form è il seguente:

body{
text-align:center;
margin:10px 0;
padding:0;
}
form {
width:550px;
border:1px dashed rgb(51,102,153);
padding:5px;
margin:0 auto;
}

Questo codice serve per avere il form al centro della pagina (body » text-align: center), oltre al seguente: (form » margin:0 auto). In questo modo sia in IE che con altri browser avremo sempre i nostri elementi al centro.

fieldset { 
padding: 1em;
border:2px groove;
}
legend {
font-weight:bold;
font-style:normal;
font-family:Verdana, sans-serif;
color: #990000;
font-size:14px;
padding:5px;
}
#informazioni label {
display:block;
float:left;
width:155px;
text-align:right;
font-weight:bold;
color:rgb(51,102,153);
padding-right:0;
font-family:Verdana, sans-serif;
font-size:13px;
}

Come si può vedere dal codice qui sopra, sono stati aggiunti nuovi elementi rispetto al "tradizionale" modo di costruire i form; ho volutamente messo tra virgolette il termine tradizionale in quanto li abbiamo sempre (più o meno tutti) realizzati con le tabelle.

Dicevamo dei nuovi elementi che sono: fieldset, legend, label.
fieldset serve a raggruppare in maniera logica una serie di input per l'inserimento dei dati secondo "raggruppamenti" appartenenti ad un determinato contesto; infatti nel file dell'esempio ho dato a fieldset il valore: Informazioni Generali.
legend è il secondo elemento che deve essere inserito dopo fieldset e serve ad applicare l'etichetta che avete visto, cioè: Informazioni Generali, la quale descrive il gruppo di elementi contenuto.
label è una ulteriore etichetta che descrive i vari elementi di input.

Il testo che descrive il campo viene incluso in questo elemento. Una cosa molto importante: label deve essere collegato e deve richiamare l'id (identificativo) del campo a cui si riferisce; infatti ho scritto:

<label for="nome">Nome:</label> 
<input type="text"  name="nome" id="nome" value="" /> 

for="nome" richiama l'identificativo con lo stesso nome che si trova nell'elemento "input". Se non ci fosse questa "corrispondenza" o uno dei due "id" fosse diverso, riceveremmo un messaggio di errore, oltre ad avere un collegamento alla pagina (action) non valido.

Il seguente form è scritto in maniera corretta, secondo le specifiche del W3C; non possiamo fare altro che migliorarlo, dal punto di vista dell'accessibilità introducendo due attributi, cioè: tabindex ed accesskey.
Tabindex può essere usato al posto del mouse per spostarsi nei campi di testo; a seconda del valore che gli si assegna, esso darà la precedenza.
Accesskey ha una funzione simile al tabindex, solo che ci si può spostare nella pagina da un campo di testo ad un altro, premendo il tasto Alt + la lettera che si trova accanto all'elemento che ci interessa.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati