Comunicare web a scuola - Numero 6

Bricioleweb

di Michele Basile, IPC Verri di Busto Arsizio (VA)

Modulo di contatto accessibile

Piccoli accorgimenti per rendere il proprio sito più accattivante, funzionale ed estet ic amente gradevole. In questo numero vedremo come realizzare un modulo di contatto accessibile. Un esempio simile a quello proposto in questo numero è visualizzabile all'indirizzo www.ipcverri.it/modulo_reclami.html.

Come posso costruire un modulo di contatto da inserire in una pagina web che rispetti i requisiti di accessibilità?

Per l'esempio proposto in questo numero utilizzeremo esclusivamente cod ic e xhtml e css. Supponiamo di voler costruire un modulo di contatto come quello raffigurato nell'immagine.

La caratteristica di questo modulo è quella di fornire all'utente che naviga con un browser testuale, tutte le informazioni necessarie per l'immissione corretta dei dati e per il successivo invio. Si raccomanda, prima di inserire il modulo nella pagina web, di ind ic are chiaramente un titolo ed una breve descrizione delle finalità del modulo.

Codice (X)HTML

<form action=" mailto: nomecasella@estensione.it" method="post" name="form" id="form">
<fieldset id="informazioni">
<legend>Inserimento dati</legend>
<p><label for="nome">Nome:</label><input type="text" name="nome" id="nome" value="" tabindex="1" accesskey="n" /></p>
<p><label for="cognome">Cognome:</label>
<input type="text" name="cognome" id="cognome" value="" tabindex="2" accesskey="c" /></p>
<p><label for="oggetto">Oggetto:</label>
<input type="text" name="oggetto" id="oggetto" value="" tabindex="3" accesskey="o" /></p>
<p><label for="message">Messaggio:</label>
<textarea name="message" cols="20" rows="7" id="message" tabindex="4" accesskey="m"></textarea></p>
</fieldset>
<fieldset id="conferma">
<legend>Invio dei dati</legend>
<label for="invia"> <input name="submit" type="submit" id="invia" value="Invia" title="Invia il modulo" tabindex="5" accesskey="I" />
<input id="annulla" type="reset" value="Riscrivi" title="Cancella e riscrivi" tabindex="6" accesskey="r"/>
<label for="annulla">
</fieldset>
</form>

Volendo, gli stessi link li possiamo creare come Analizziamo alcuni elementi del cod ic e xhtml.

•  Fieldset: è l'elemento di raggruppamento delle informazioni, il contenitore, all'interno del quale vanno inseriti dati omogenei (nel nostro esempio fieldset “informazioni” contiene tutti gli elementi riferiti alla persona che compila il modulo)

•  Legend: è l'elemento et ic hetta che deve essere inserito dopo fieldset e descrive il raggruppamento (nel nostro esempio “Inserimento dati” “Invio dei dati”)

•  Label: è l'etichetta che contrassegna i singoli campi di inserimento dati.

L'elemento action=" mailto: nomecasella@estensione.it" method="post": è uno dei modi per inviare il modulo verso un indirizzo di posta elettronica. Inoltre, con una p ic cola aggiunta di cod ic e è possibile, dopo l'invio del modulo, far visualizzare al visitatore una pagina di ringraziamenti per l'avvenuta compilazione.

Codice CSS

Definiamo ora gli stili e l'impaginazione del modulo nel CSS che verrà richiamato dalla pagina xhtml

body {text-align:center;margin:30px 0;padding:0; font-family:Verdana,helvetica,sans-serif;}
form {width:550px; border:1px dashed #A04040; padding:5px; margin:0 auto;}
form p {margin:.2em 0;}
fieldset {padding: 1em; border: 1px solid #B0B0B0;}
legend {font-weight:bold; font-style:normal; color: #444444; padding:5px;}
#informazioni label {display:block; float:left; width:155px; text-align:right; font-weight:bold; color:#800; padding-right:0;}
#informazioni input {font-weight: bold; letter-spacing: .2em; width:300px; border:#73848C 1px solid; background: #fafafa; padding:0; margin-left:10px;}
#informazioni textarea{font-weight:bold; letter-spacing: .2em; width:300px; border:#73848C 1px solid; background: #fafafa; padding:0px 0px 0px 2px; margin-left:10px;}
input#invia {width:100px; border:#73848C 1px solid; background-color: #800; color: #fff; font-weight: bold;}
input#annulla {width:80px; border:#73848C 1px solid; background-color: #800; color: #fff; font-weight: bold;}

La struttura della pagina (body) e la larghezza del modulo (width: 550 px) dipendono dal layout del sito web.

Risorse utili per approfondire l'argomento

•  lau.csi.it/realizzare/accessibilita/codice_html/form_accessibili.shtml#intro

•  www.extrowebsite.com/articolocss.asp?id=26

Per quelli che vogliono gestire l'invio di moduli attraverso degli script, possono trovare tutorial e script nel sito www.giovanetti.it.