Con questo articolo illustro brevemente un form accessibile utilizzando xhtml e css
I requisiti minimi per poter poi provare il risultato finale sono:
- Conoscenza base html/xhtml e css
Detto questo… Siete pronti? Allora iniziamo:
- Come prima cosa prepariamo una cartella sul nostro desktop con il nome form (il nome è indicativo!)
- All’interno di quest’ultima creiamo un’altra cartella con il nome style
- Una volta create le cartelle creiamo un file index.htm all’interno della cartella form e un file style.css all’interno della cartella style
- Bene… ora apriamo con il nostro editor preferito il file index.htm e incominciamo ad inserire il codice seguente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Form accessibile</title>
</head><body>
<div id=”wrapper”>
<p>Questa mini guida permetterà di creare un form accessibile ed usabile con l’ausilio di xhtml e css</p></div>
</body>
</html> - Una volta inserito questo codice tra <head> e </head> inseriamo il codice per collegare il foglio di stile
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen" />
- Ora salvate il documento per non perdere il lavoro svolto fino a qui.
- Una volta salvato inseriamo quest’altro codice dopo il paragrafo, che altro non è che il form:
<form action="#" method="post">
<fieldset>
<legend>Informazioni Personali </legend>
<p>
<label for="nome" class="request">Nome*</label>
<input type="text" name="nome" id="nome" class="text" />
</p>
<p>
<label for="cognome" class="request">Cognome*</label>
<input type="text" name="cognome" id="cognome" class="text" />
</p>
<p>
<label for="titolo_studio" class="one">Titolo di studio</label>
<select name="titolo_studio" id="titolo_studio">
<option value="seleziona" selected="selected">Seleziona titolo di studio</option>
<option value="licenza media" >licenza media</option>
<option value="diploma">diploma</option>
<option value="laurea">laurea</option>
</select>
</p>
<p>
<label for="occupazione" class="one">Occupazione</label>
<select name="occupazione" id="occupazione">
<option value="seleziona" selected="selected">Seleziona l'occupazione</option>
<option value="disoccupato" >disoccupato</option>
<option value="impiegato">impiegato</option>
<option value="avvocato">avvocato</option>
</select>
</p>
</fieldset>
<fieldset>
<legend> Recapiti </legend>
<p>
<label for="via" class="request">Via*</label>
<input type="text" name="via" id="via" class="text" />
</p>
<p>
<label for="citta" class="request">Città*</label>
<input type="text" name="citta" id="citta" class="text" />
</p>
<p>
<label for="CAP" class="request">CAP*</label>
<input type="text" name="cap" id="CAP" class="text" />
</p>
<p>
<label for="mail" class="request">E-mail*</label>
<input type="text" name="email" id="mail" class="text" />
</p>
<p>
<label for="phone" class="request">Telefono*</label>
<input type="text" name="phone" id="phone" class="text" />
</p>
</fieldset>
<fieldset>
<legend> Richiesta informazioni</legend>
<p>
<label for="commento" class="request">Commento*</label>
<textarea id="commento" cols="30" rows="10" ></textarea>
</p>
</fieldset>
<p>
<input name="submit" type="submit" id="invia" value="invia" class="check" />
</p>
</form> - Salvate ancora il documento e poi cliccate sul file per avviarlo in un browser. Questo è il risultato che dovreste ottenere:
- Ora aprite il foglio di stile e copiate il seguente codice all’interno del file:
body{
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}#wrapper{
margin:0 auto;
padding:0;
width:500px;
}p{
margin:0;
padding:0;
line-height:21px;
}form{
margin:0;
padding:0;
float:left;
width:500px;
}form p{
margin:0;
padding:5px 0;
float:left;
}form fieldset{
margin:10px 0;
padding:0;
float:left;
border:1px solid #003366;
width:500px;
}form legend{
margin:0 0 10px 10px;
padding:5px 10px;
float:left;
border:1px solid #003366;
font-weight:900;
color:#003300;
}form label.request{
margin:0;
padding:5px 10px;
float:left;
width:100px;
color:#ff0000;
}form label.one{
margin:0;
padding:5px 10px;
float:left;
width:100px;
color:#000033;
}form input.text{
margin:0;
padding:3px 5px;
width:160px;
}form input:focus, form select:focus{
background-color:#FFFF66;
color:#006600;
font-weight:900;
}form select{
margin:0;
padding:0;
}form option{
margin:0;
padding:0 5px;
}form textarea:focus{
background-color:#FFCC00;
}form input.check{
margin:0;
padding:5px 3px;
float:right;
font-size:16px;
}form input.check:hover{
background-color:#FF0000;
} - Salvate anche questo file e aggiornate il file index.htm nel vostro browser. Dovreste ottenere questo risultato:
Ok… con questo avete terminato ma passiamo alle spiegazioni. Innanzitutto ho diviso il form in più parti utilizzando il tag <fieldset> e ad ognuno ho associato un titolo con il tag <legend>. Poi ho associato ogni label al suo relativo campo con for=”nome” id=”nome”. Infine ho provveduto ad ottimizzare gli spazi dei paragrafi e le dimensioni delle label.
Poi sempre sulle label ho applicato una classe diversa (.request) su quei campi che fossero obbligatori in modo tale da colorarli in modo diverso dagli altri.
L’altra accortezza è stata quella di applicare l’effetto focus sui campi che si è cliccato in modo tale da sapere dove si è in quel momento.
Credo di aver detto tutto in merito a questa mini guida, sperando che sia utili a qualcuno.
Nota molto importante: l’effetto focus funziona solo con firefox e opera (altri browser non li ho testati). Con internet explorer l’effetto non si ha. Questo post vuole anche essere uno spunto di riflessione in quanto il browser più utilizzato non rispecchia gli standard e non rispettandoli non permette di utilizzare a pieno le potenzialità, in questo caso, dei css.
A voi la sentenza!! 
N.B: allego il file zippato con all’interno tutto il codice bello e pronto e se trovate errori o volete aggiungere qualcosa per ottimizzarlo ancora lasciate il vostro commento!! Link file zippato
Ottimo articolo, sto giusto facendo questo argomento a scuola
Mi stato molto d’aiuto!
Ottimo articolo, sto giusto facendo questo argomento a scuola
Mi è stato molto d’aiuto!
Non c’è di che.. ovviamente questo è un semplice esempio… prossimamente, tempo permettendo, vorrei pubblicare un articolo più preciso inserendo sia javascript o ajax che php!!
Sono veramente contento che i miei articoli servano a qualcuno!!
bè penso che tutti gli articoli servano a qualcuno. è questo lo scopo del sito, sennò non ne vedo il motivo di stare quì a scrivere
Hai perfettamente ragione.. ma sai.. il più delle volte mi chiedo se quello che scrivo sia veramente utile