*Linux Guide

Fare Web - Progetto e Realizzazione - Parte 9

*

Oggetti e Contenuti

Moduli per ogni necessità

I moduli sono strumenti che conferiscono alla pagina una grande interattività e consentono il trattamento di dati e l'invio dei medesimi al destinatario. Consentono scelte, controlli e interazioni molto importanti. Di solito un sito possiede una pagina riservata ai contatti e questa è di solito munita di un modulo nel quale inserire i propri dati e commenti o altro.
Vediamo quindi come realizzare moduli ben organizzati, usabili e accessibili e per farlo abbiamo prodotto un modulo completo delle varie interattività. In esso è presente un campo di immissione per i dati del mittente, un campo di immissione per l'indirizzo E-mail, un menu di selezione, una serie di bottoni radiali, una serie di caselle di controllo, un area di testo e due pulsanti per l'invio o la cancellazione dei dati, come potete osservare in questa pagina
Analizziamo quindi il codice di questo modulo :


<form id="modulo" action="#" method="post">
<fieldset class="campo">
<label for="nome">Nome e Cognome</label>
<input type="text" id="nome" tabindex="20" title="Inserisci Nome e Cognome" /><br />
<label for="e-mail">E-mail</label>
<input type="text" id="e-mail" tabindex="21" title="Inserisci l'indirizzo e-mail" />
</fieldset>

<fieldset class="campo">
<select tabindex="22" title="Scegli">
<option>Selettori</option>
<optgroup class="primo" label="primo gruppo">
<option value="">scelta 1a</option>
<option value="">scelta 2a</option>
<option value="">scelta 3a</option>
</optgroup>
<optgroup class="secondo" label="secondo gruppo">
<option value="">scelta 1b</option>
<option value="">scelta 2b</option>
<option value="">scelta 3b</option>
</optgroup>
</select>
</fieldset>

<fieldset class="campo">
<label for="opuno">opzione 1</label>
<input type="radio" id="opuno" checked="checked" tabindex="23" />
<label for="opdue">opzione 2</label>
<input type="radio" id="opdue" tabindex="24" />
<label for="optre">opzione3</label>
<input type="radio" id="optre" tabindex="25" />
</fieldset>

<fieldset class="campo">
<label for="spuno">controllo 1</label>
<input type="checkbox" id="spuno" checked="checked" tabindex="26" />
<label for="spdue">controllo 2</label>
<input type="checkbox" id="spdue" tabindex="27" />
<label for="sptre">controllo 3</label>
<input type="checkbox" id="sptre" tabindex="28" />
</fieldset>

<fieldset class="campo">
<label for="testo">Commenti</label><br />
<textarea rows="10" cols="45" tabindex="29" id="testo">Invia un commento</textarea>
</fieldset>

<fieldset class="invio">
<input type="submit" tabindex="30" value="Invia" />
<input type="hidden" id="redirect" value="http://www.sampsite.it/grazie.htm" />
<input type="reset" tabindex="31" value="Riscrivi" />
</fieldset>
</form>

Analizziamo i singoli elementi che costituiscono un modulo.
Per prima cosa notiamo l'elemento generale (<form>) in cui sono specificati le azioni (in questo caso sulla stessa pagina "#") ed il metodo di utilizzo (in questo caso invio "post").
Dal codice si evidenziano sei sezioni ognuna delle quali si apre e si chiude con i marcatori di campo (<fieldset> </fieldset>). Questa suddivisione è molto importante e utile e permette di suddividere il modulo in sezioni di diversa importanza utile ai sistemi assistivi. Si nota che questi campi sono identificati in modo identico (class="campo") tranne l'ultimo (id="invio") e ne vedremo i motivi quando parleremo di aspetto grafico.
Il marcatore etichetta (<label>) è molto importante ai fini dell'accessibilità in quanto il lettore di schermo permetterà all'utente di immettere correttamente i dati all'interno dei vari campi di immissione. La sua sintassi è rigorosa e si nota che all'interno del marcatore etichetta c'è il richiamo (<label for="nomex">) al campo di immissione specifico (<input ... id="nomex" ...>). E' importantissimo non dimenticare mai questa architettura.
I marcatori di immissione (<input>) sono la vera e propria linea di contatto tra macchina e utente, essi permettono di interagire con la macchina essendoci la possibilità di immettere dati e testo, di effettuare delle scelte, di applicare diverse procedure e di inviare il tutto al destinatario. La loro sintassi è rigorosa e prevede una tipizzazione (type="tipo di immissione") che sancisce se sia un bottone, una stringa di testo, un casella di spunta,
una identificazione (id="nome") che consente di abbinare l'etichetta al'immissione in oggetto,
un indice di tabulazione (tabindex="numero progressivo") che permette di saltare di immissione in immissione con il solo uso della tastiera,
un testo alternativo/illustrativo (title="testo alternativo") che aiuta alla compilazione del modulo
ed una eventuale predefinizione (checked="checked"), quest'ultima si applica ai bottoni opzionali ed alle caselle di selezione e che indica una preferenza.
Le aree di testo (<textarea>) servono ad immettere commenti, messaggi, codici ed altro e sono la parte relativa alla conversazione. Si devono stabilire però il numero di colonne dell'area (larghezza) ed il numero di righe (altezza) e la sintassi è molto semplice (<textarea rows="10" cols="45" tabindex="29" id="testo">Invia un commento</textarea>). Si nota anche una piccola frase indicativa di cosa debba fare il compilatore di quest'area di testo.
I pulsanti di invio pur facendo parte dei marcatori di immissione, hanno una grammatica un pò diversa. Si nota che il pulsante di invio (<input type="submit" tabindex="30" value="Invia" />) ha un attributo ed un valore (value="Invia") che permette di far si che l'utente sappia cosa avviene una volta cliccato. Questo attributo ha un valore diverso nel pulsante di cancellazione (<input type="reset" tabindex="30" value="Riscrivi" />) e che consente all'utente di cancellare tutte le azioni effettuate nel modulo.
Si nota che tra il pulsante di invio e quello di cancellazione vi sia un altro marcatore di immissione che non compare graficamente nel modulo (<input type="hidden" id="redirect" value="http://www.sampsite.it/grazie.htm" />). E' l'immissione di redirezione e consente all'utente, una volta che abbia cliccato il pulsante di invio, di raggiungere automaticamente una pagina che lo ringrazia di avere inviato il modulo, una cortesia ed un riconoscimento che conforta l'utente che percepisce che l'operazione è andata a buon fine. Si nota come vi sia l'attributo "redirect" con il valore relativo alla pagina di cortesia. L'altro attributo è quello relativo al tipo di questa immissione ovvero invisbile (type="hidden").
Concludiamo la trattazione sui moduli con l'applicazione di uno stile grafico estetico che renda il modulo carino e funzionale.

#modulo{border : 1px solid #006;
background : #b0e0e6;
text-align : center;
color : #369;
}

#modulo .campo{border : 2px solid #b0e0e6;
}

#modulo .campo:hover{background : #f0ffff;
color : #000;
border-width : 2px;
border-style : solid;
border-color : #ccc #ccc #666 #666;
}

#modulo #nome,
#modulo #e-mail{height : 25px;
width : 200px;
border : 2px solid #5f9ea0;
}
#modulo #nome:hover,#modulo #nome:focus{border : 2px solid #000;
}
#modulo #e-mail:hover,#modulo #e-mail:focus{border : 2px solid #000;
}

#modulo select{width : 200px;
height : 25px;
border : 2px solid #006;
font-size : 100%;
}

#modulo #testo{width : 60%;
height : 60px;
border : 2px solid #5f9ea0;
}

#modulo #testo:focus{background : #ffc;
}

#modulo #invio{border : 2px solid #b0e0e6;
}

#modulo #invio:hover{background : #fa8072;
color : #000;
border-width : 2px;
border-style : solid;
border-color : #ccc #ccc #666 #666;
}

#modulo #invia{border : 2px solid #000;
width : 15%;
height : 5%;
background : #f5f5f5;
font-size : 100%;
color : #000;
margin-right : 5px;
}
#modulo #invia:focus{background : #ffc;
}

#modulo #cancella{border : 2px solid #000;
width : 20%;
height : 5%;
background : #ccc;
font-size : 100%;
}
#modulo #cancella:focus{background : #ffc;
}

Non ci sono particolari caratteristiche da rimarcare. Solo l'uso della tecnica di raggruppamento evidenziata nel codice, favorisce una maggior leggerezza del CSS e una miglior gestione di tutto l'ambito. Tengo a sottolineare il fatto che la bordatura dei vari campi di immissione è particolarmente evidente in quanto soggetti ipovedenti potrebbero avere problemi nell'identificare dove inserire i dati se non ci fosse proprio questa particolare evidenziazione.
Potete osservare il risultato di quanto prodotto in questa pagina
Passiamo a vedere come inserire uno script JavaScript in modo da renderlo utile e massimamente accessibile.

<< Precedente | Indice | Successiva >>

Linux Guide | Torna in alto