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.
Guide CSS
Responsive Desing, la guidaProgettare siti da fruire su dispositivi diversi è imprescindibile... |
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
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 base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |