Dopo il recente articolo Form con i CSS
torniamo a parlare di moduli. In questo appuntamento vedremo come sia possibile realizzare form con un uso estensivo
della grafica e un buon supporto cross-browser grazie ai CSS. Prima di cominciare un consiglio
fondamentale: se vorrete cimentarvi nella realizzazione di form simili a quello che presenteremo in questo
articolo, è importante che il form degradi bene con immagini disabilitate e che la marcata
impostazione grafica non ne possa compromettere la fruibilità sui diversi browser. Cominciamo subito.
La grafica
Presentiamo subito l'esempio che accompagna l'articolo e il suo screenshot:
La grafica del form è composta da diverse immagini, ovvero:
- lo sfondo per l'intero form
- lo sfondo per i campi di input
- lo sfondo per la textarea
- lo sfondo per il bottone di invio dati
Per la buona riuscita è essenziale che tutti gli elementi grafici condividano lo
stesso colore dominante: per praticità ho proceduto con il realizzare un'immagine unica,
tagliando poi i campi del form e cancellandoli dall'immagine di partenza che ho salvato infine
come sfondo del form.
Il markup
Dato che campi di input e textarea sono elementi replaced,
ovvero resi dal browser e dal sistema operativo, sono molte le differenze con cui vengono trattati
dai diversi browser. In particolare, sistemare un'immagine di sfondo su un campo di input
o una textarea in maniera cross-browser è un compito molto difficile: si è reso quindi necessario
utilizare una marcatura che potesse agevolare lo scopo.
Ho quindi proceduto per l'esempio a racchiudere i campi di input e la
textarea in dei div, rispettivamente con classi
"input-cont" e "textarea-cont". Il risultato è un markup leggermente sovradimensionato, ma
che senz'altro aiuta la struttura del form: vediamo come rende l'esempio senza CSS.
Per il resto, si sono usate delle label per etichettare i campi e il button per il bottone di
submit. Ecco quindi il codice HTML completo del form:
<form id="contact" method="post" action="">
<div>
<label for="nome">nome: </label>
<div class="input-cont"><input type="text" id="nome" name="nome"></div>
<label for="email">email: </label>
<div class="input-cont"><input type="text" id="email" name="email"></div>
<label for="message">messaggio: </label>
<div class="textarea-cont"><textarea id="message" name="message" rows=9 cols=20></textarea></div>
<button type="submit" id="go" value="invia">invia</button>
</div>
</form>
Siamo così arrivati alla parte centrale dell'articolo, ovvero il CSS.
Il CSS
Il CSS dell'esempio non risulta particolarmente
difficile, anche se piuttosto corposo. Cominciamo con il form.
Per prima cosa vengono definite larghezza e altezza, utilizzando il
simplified box model hack spiegato qui sul blog
che consente di ottenere un dimensionamento consistente anche su IE5.x; viene poi
specificato il padding e l'immagine di sfondo:
form#contact{width:320px !important;width /**/:350px;
height:275px !important; height /**/:300px;
margin: 0;padding: 15px 15px 10px;
background:#D3FFB6 url(formBk.png) no-repeat}
Ora le label, ovvero le etichette per i campi di input:
verranno rese float così da poter attribuire ad esse le dimensioni; vengono poi
specificati il font (combinato con un line-height di 30 pixel),
un margine destro di 5px, l'allineamento del testo e il suo colore:
label{float: left;width: 90px;height: 30px;
font: 12px/30px Arial,sans-serif;
margin-right: 5px;text-align: right;color: #666}
È essenziale ora eliminare i bordi che caratterizzano i campi di input
e i bottoni, così da poter predisporre gli sfondi. Viene anche specificato
il font e il colore del testo:
input,textarea,button{border: 0px solid;color: #475078;
font: 12px Arial,sans-serif}
Procediamo quindi con i div che contengono i campi di input. Verranno resi
float, con dimensioni di 200x30 pixel, viene loro assegnato lo sfondo e un margine inferiore
così da distanziare elementi successivi:
div.input-cont{float: left;width: 200px;height: 30px;
background: #D3FFB6 url(inputBk.png) no-repeat top left;
margin-bottom: 3px}
Ecco quindi la regola sugli input, che verranno resi block-level. Vengono anche specificati
i margini così da separare gli input dai div che li contengono, lasciando quindi spazio
per i bordi grafici:
input{display: block;width: 175px;background: #FFF;
margin:5px 0 0 10px}
Procedimento analogo a quello utilizzato per gli input viene usato anche per la textarea,
ecco le due regole:
div.textarea-cont{float: left;width: 200px;height: 170px;
padding: 1px;background: #D3FFB6 url(textAreaBk.png) no-repeat}
textarea{width: 170px;height: 140px;margin: 10px}
Non ci resta quindi che la regola per il bottone di submit: viene reso float,
con dimensioni esplicite. Anche qui, come nel caso del form, ho utilizzato il
simplified box model hack per gestire dimensioni e padding. Viene specificato
un margine sinistro di 95px, insieme alla dichiarazione display:inline
così da evitare il doubled-margin float di cui si Ë parlato in questo articolo
che raddoppia i margini in IE6. Viene infine definito il padding, l'immagine di sfondo,
il colore del testo e il cursore a manina:
button#go{float: left;width: 130px;
height:25px !important;height /**/:30px;line-height: 25px;
display: inline;margin-left:95px;padding: 1px 0 4px;
background: #D5D8E1 url(submitBk.png) no-repeat;
color: #000;cursor: pointer}
Il nostro esempio è cosÏ ultimato.
Come ho detto in apertura, è importante a questo punto accertarsi che il form
sia fruibile in ogni caso: ecco quindi come rende con le immagini disabilitate...
certo il risultato è piuttosto anonimo in questo caso, ma è comunque usabile.
La compatibilità dell'esempio è piuttosto buona: è stato infatti testato con successo
su Internet Explorer dalla versione 5 alla 7 e le ultime versioni di Opera e Firefox.
Una piccola nota su Safari. Sul browser di Apple la modifica dei form con i CSS è piuttosto problematica, soprattutto sulle prime versioni. Il risultato non è ottimale come sugli altri ma è comunque accettabile. Ecco lo screenshot:
Ad essere sincero, la realizzazione dell'esempio ha richiesto pi? lavoro di quello che mi aspettavo,
ma in caso di necessità grafiche particolari questo articolo potrebbe essere una
buona base di partenza per i lettori. Esempi
e immagini sono disponibili per il download. Alla prossima.
