Abbiamo visto come si può ottenere l’impalcatura dei form solo con l’impiego dei CSS e senza tabelle; infatti abbiamo utilizzato i fogli di stile per quanto riguarda il posizionamento nello spazio del layout. Oltre queste caratteristiche i fogli di stile ci permettono di personalizzare anche l’aspetto estetico e grafico. Per comodità mi baserò sullo schema standard per i commenti presente in molti blog.

Per iniziare creiamo il nostro form con il codice XHTML riportato qui di seguito:

<div id="wrap">
<div id="form">
<h1>Sickbrain.org &raquo; A proposito di Web Publishing</h1>
<form id="Commenti" action="">
<fieldset>
<legend>Commenti</legend>
<label for="Name">Nome <input id="Name" name="Nome" type="text"/></label>
<label for="email">Email <input id="email" name="email" type="text"/></label>
<label for="comment">Commento <textarea name="Commento" id="comment"></textarea></label>
<button id="invia" type="submit" value="Invia">Invia</button>
</fieldset>
</form>
</div><!-- end #form -->
</div><!-- end #wrap -->

Ovviamente il risultato è completamente privo di stile ma lavorando con pazienza si potrà ottenere questo altro risultato.

Dobbiamo lavorare di grafica con il software che si preferisce per riuscire ad avere principalmente due tipologie di sfondo: uno che è un gradiente di due tonalità di azzurro il quale sarà utilizzato come sfondo del form; l’altro per visualizzare il passaggio da un campo all’altro adoperando la tecnica descritta in un altro mio articolo “Creare un effetto su blocchi con sfumatura di tonalità”, riuscendo ad avere così uno sfondo che sfuma automaticamente.

Ovviamente ognuno è libero di scegliere le tonalità e il colore che preferisce; ma per chi fosse interessato pubblico anche le immagini raggiungibili ai seguenti indirizzi:

mentre le icone utilizzate sono state scelte fra quelle presenti nel tema Nuvola di Icon-King e quelle di FamFamFam.

Adesso possiamo procedere con una prima elaborazione dello stile del form, impiegando l’immagine di sfondo e modellando gradualmente l’aspetto:

#wrap{
width:35%;
margin: 0 auto;
border:1px solid #0063DC;
background: #105CB6 url('gradient.png') bottom repeat;
}
#wrap #form { border: 1px solid white;}
#wrap #form fieldset { border: none; margin: 10px;}
#wrap #form fieldset legend {
margin-bottom:10px;
font-size:large;
font-weight:normal;
color:#fff;
}
label {
cursor: pointer;
display: block;
vertical-align: middle;
float: right;
margin-bottom: 4px;
color:#fff;
font-weight: bold;
font-size: 90%;
padding: 3px;
}
input, textarea, button {
width: 100%;
cursor: pointer;
padding:3px;
}
#email, #Name {
padding: 0.2em;
font-size: 1.2em;
padding-left:25px;
}
#comment {
padding: 0.2em;
font-size: 1.2em;
padding-left:12px;
width:218px;
}
textarea {
height: 150px;
padding-left:20px;
font-size:1.2em;
}
#invia {
padding: 2px 4px;
margin: 0 4px 0 0;
font-size: 80%;
font-weight: bold;
width:100px;
float: right;
}

Il risultato sfrutta l’immagine gradient.png come sfondo del #wrap, mentre #form contiene i formulari tipici come nome, mail e i commenti. Ma considerando tutto il lavoro fatto per ottenere un’immagine che sfuma cerchiamo di impiegarla; e allora lavoriamo sugli elementi che risultano essere sensibili al passaggio del mouse, in questo caso i vari campi per l’immissione dei dati:

label:hover, input:hover, input:active, input:focus, label:active, label:focus {
color: black;
cursor: pointer;
border: 1px solid #fff;
padding: 2px;
background:#fff url('smooth-bg.gif');
}
input:hover, input:active, input:focus {
background-color: #fff;
border: 1px solid #000;
}
input, textarea, button {
width: 100%;
cursor: pointer;
padding: 3px;
}
#email, #Name {
padding: 0.2em;
font-size: 1.2em;
border: 1px solid #B5CE29;
padding-left: 25px;
}
#comment {
background:#fff url('kedit.png') 3px 0% no-repeat;
padding: 0.2em;
font-size: 1.2em;
border: 1px solid #B5CE29;
padding-left:12px;
width:218px;
}
#comment:hover, #comment:active, #comment:focus {
border: 1px solid #C6DE3C;
background:#fff url('kedit.png') 3px 0% no-repeat;
padding-left:18px;
}
textarea {
height:150px;
padding-left:20px;
}
#email{ background:#fff url('email.png') 3px 50% no-repeat; width:204px;}
#Name { background: #fff url('personal.png') 2px 50% no-repeat; width:204px;}
#email:hover, #email:active, #email:focus {
background-image: url('kmail.png');border: 1px solid #C6DE3C;}
#Name:hover, #Name:active, #Name:focus {
background-image: url('kgpg.png'); border: 1px solid #C6DE3C;}
#invia {
background: #fff url('accept.png') 2px 50% no-repeat;
padding: 2px 4px;
margin: 0 4px 0 0;
font-size: 80%;
font-weight: bold;
width:100px;
float: right;
}
#invia:hover, #invia:active, #invia:focus{ color:#880000;}

Aggiungendo questo codice nel foglio di stile subito dopo la definizione del label e si potrà ottenere il risultato definitivo.

I browser

Ho effettuato i test di compatibilità di questa tecnica su browser distinti: Firefox, IE7; penso che su IE6 ci siano i soliti problemi di visualizzazione nei confronti delle PNG e una possibile soluzione consiste nell’impiego delle stesse immagini in formato GIF. Considerando che comunque l’aggiornamento a IE7 viene effettuato in automatico ho pensato di non operare questa scelta.

Se ti è piaciuto questo articolo puoi commentare oppure condividerlo online tramite i social network.
Se invece mi adori e non vuoi perderti nemmeno uno dei miei post puoi iscriverti al Feed RSS.