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:
Figura 1 - Screenshot del form realizzato nell'esempio
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.
Ultimi articoli CSS
Guide CSS
Guida CSS di baseI CSS servono per gestire tutto il layout di un sito Web. E'... |
Guida Layout dei siti con i CSSLa guida ai layout con i CSS è uno strumento ideale per chi intende... |
Guida Interfacce web con PhotoshopQuesta guida mostra con semplici esempi come lavorare ad un layout e... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base22 Febbraio 2010 a Milano |
|
|
Corso Accessibilità siti Web22 Marzo 2010 a Milano |
|
|
Corso Accessibilità siti Web01 Marzo 2010 a Roma |