Gli elementi di un form, senza un appropriato stile CSS, vengono visualizzati all’interno di ogni singolo browser in maniera differente. Infatti, ogni browser contiene al suo interno delle regole ben precise per tutti gli elementi della pagina, comprese il form, che si differenziano da quelle dei concorrenti e che dipendono in buona parte dall'interfaccia del sistema operativo in uso.
Abbiamo visto queste differenze quando ci siamo occupati dei Reset CSS. Bisogna considerare che i form sono utilizzati per consentire all’utente di interagire con il sistema, quindi un modulo senza alcuno stile può risultare difficile (a volte addirittura impossibile) da comprendere, con la conseguenza di poter disorientare l'utente alle prese con la compilazione.
Vedremo in questa lezione come assegnare regole di stile ai form in maniera da renderli uguali su ogni browser e, soprattutto, facilmente utilizzabili da parte degli utenti.
Una form senza stile
Vediamo innanzitutto il form che utilizzeremo come base nella lezione. Contiene al suo interno un campo di input, un checkbox, un radiobox, una select, una textarea e un pulsante di submit.
Il codice HTML che ho utilizzato è il seguente:
<form action="#">
<fieldset>
<legend>Inserisci i tuoi dati</legend>
<ul>
<li>
<label for="titolo">Titolo</label>
<select name="titolo" id="titolo">
<option value="">Sig.</option>
<option value="">Sig.ra</option>
</select>
</li>
<li>
<label for="nome">Nome</label>
<input type="text" name="nome" id="nome" />
</li>
<li>
<fieldset>
<legend>Sesso</legend>
<input type="radio" name="sesso" id="sessom" />
<label for="sessom">M</label>
<input type="radio" name="sesso" id="sessof" />
<label for="sessof">F</label>
</fieldset>
</li>
<li>
<fieldset>
<legend>Interessi</legend>
<input type="checkbox" name="interessi" id="interessim" />
<label for="interessim">Musica</label>
<input type="checkbox" name="interessi" id="interessis" />
<label for="interessis">Sport</label>
<input type="checkbox" name="interessi" id="interessil" />
<label for="interessil">Libri</label>
</fieldset>
</li>
<li>
<label for="biografia">Biografia</label>
<textarea name="biografia" id="biografia" cols="30" rows="10"></textarea>
</li>
<li>
<input type="submit" name="submit" id="submit" value="Invia" />
</li>
</ul>
</fieldset>
</form>Notiamo che è stato utilizzato un campo label per ogni elemento del form. È fortemente consigliato (se non d’obbligo), infatti, utilizzare l’elemento label al posto di eventuali paragrafi, span, etc., per inserire le etichette dei vari campi. Utilizzare una label consente, oltre che attivare il focus sull’elemento corrispondente al click su di essa, di garantire l’utilizzo del form anche a utenti disabili che navigano con browser testuali e screen reader.
Proviamo a vedere la tabella che abbiamo appena creato con diversi browser su questa pagina. Notiamo che, oltre a contenere differenze di stile, risulta piuttosto difficile da comprendere, soprattutto nell’area in cui ci sono radiobox e checkbox.
Iniziamo quindi a lavorare con il CSS per assegnare lo stile a tutti gli elementi della form.
Stile CSS
La prima operazione da compiere è assegnare uno stile di base sia alla pagina che al form e ai fieldset. Andiamo infatti a scegliere un font diverso e a rimuovere eventuali margini, padding e bordi indesiderati:
* { margin: 0; padding: 0; }
body {
background: #F6F9FE;
color: #69B1D9;
font-family: Verdana, sans-serif;
font-size: 12px;
}
form { margin: 20px; }
fieldset { border: none; }
legend { font-size: 16px; font-weight: bold; }
fieldset fieldset legend {
font-size: 12px;
font-weight: bold;
padding: 5px 0;
}
ul li { list-style: none; margin: 20px 10px; }A questo punto possiamo iniziare ad assegnare dello stile ai singoli elementi.
input, textarea, select {
border: 1px solid #C6CFE2;
background: #F7FBFE;
padding: 2px;
}
label {
padding: 2px;
width: 80px;
display: block;
float: left;
font-weight: bold;
}
fieldset fieldset label {
margin-left: 50px;
width: 30px;
}
fieldset fieldset input {
border: none;
float: left;
margin: 0 20px 0 15px;
}
#submit {
background: #69B1D9;
color: #fff;
font-weight: bold;
padding: 2px 10px;
}Nelle prime due regole assegniamo lo stile agli elementi di tipo input, textarea, select e label. Siccome la label è un elemento di tipo inline, impostando la proprietà display sul valore block possiamo gestirne la dimensione ed allineare gli elementi del form.
La terza e la quarta regola ci consentono di assegnare uno stile differente alle label e agli elementi di tipo checkbox e radio utilizzati nel form. Infatti, se guardiamo il codice CSS, possiamo notare che tutti gli elementi di questo tipo sono racchiusi all’interno di un ulteriore fieldset. Sfruttando quindi il selettore discendente evitiamo di assegnare delle classi agli elementi.
L’ultima regola assegna uno stile differente al solo elemento di submit.
Possiamo vedere il nuovo esempio nella seconda demo.
Checkbox e Radiobox
Abbiamo sicuramente notato che nelle regole di stile che abbiamo utilizzato, non abbiamo utilizzato il CSS per modificare gli elementi di tipo checkbox o radio. Al momento non ci sono tecniche di CSS pure per questa tipologia di campi di input, quindi le uniche possibilità attuali sono affidate al Javascript oppure ad alcune regole della versione 3 del CSS che, però, ancora non sono nè ufficiali né supportate dalla maggior parte dei browser.