Form con i CSS

25 luglio 2006

In questo breve articolo vedremo un possibile modo per la marcatura e il layout dei form. Lo spunto è questo post del nostro blog che cita la fonte originale del modello, ovvero l’articolo Pretty Accessible Forms pubblicato su A List Apart, a cui è seguito il suo remake presentato su <Edit>, realizzato esclusivamente con HTML e CSS.

L’esempio dell’articolo di Alistapart, infatti, usa Javascript per sistemare il layout del form originale. È necessario a questo punto sottolineare una cosa: Javascript è un buon strumento anche per la presentazione ma solo se usato consapevolmente, se è indispensabile per superare limiti dell’HTML o dei CSS, se fornisce reali vantaggi per lo sviluppatore e/o l’utente e sopratutto se degrada bene.

Abbiamo pensato che la sezione CSS di HTML.it fosse un posto più adeguato per spiegare un po’ pi? da vicino l’implementazione del remake.

Ma non indugiamo oltre, e procediamo a presentare HTML e CSS dell’esempio. In quanto al markup, anche se il form è abbastanza corposo, è piuttosto semplice e schematico, eccone un estratto:

<form method=”post” action=”">
    <fieldset>
        <legend>Delivery details</legend>
        <div>
            <label for=”user”>Name <b>*</b></label>
            <input id=”user” name=”user”>
        </div>
        <!– altri div –>
    </fieldset>
</form>

All’interno del tag form si trovano i fieldset per raggruppare elementi di input logicamente correlati. Cosa essenziale è che subito dopo l’apertura del fieldset segua il tag legend che fornisce una breve descrizione del fielset. Seguono quindi all’interno del fieldset diversi div, ciascuno dei quali contiene una label e il relativo input. La marcatura del form offra già una solida base per la sua presentazione: ecco quindi l’esempio senza foglio di stile.

Siamo così arrivati alla parte centrale dell’articolo, ovvero il foglio di stile dell’esempio.

Per prima cosa vediamo le regole per i contenitori principali, ovvero il form e i fieldset. Per il form viene specificata una larghezza di 370px, un padding verticale di 5px e un margine di 10px per distanziarlo dalla pagina.

Per i fieldset, dato che useremo al loro interno elementi float, è necessario contenerli: ho quindi optato per la tecnica Float Nearly Everything di cui ho parlato nell’articolo Float – teoria e pratica. Assegnata quindi una larghezza pari a quella del form, si aggiungono i margini verticali e si azzera il padding.

In quanto ai bordi, per poter assegnare in maniera cross-browser solo il bordo superiore è necessario un piccolo trucco: bisognerà annullare prima tutti i bordi attraverso il valore none per poi specificarlo. Si assegna quindi un gradiente di sfondo, grazie a un’immagine di 10 pixel che si ripete in orizzontale. Ecco quindi le due regole:

form{width:370px;padding:5px 0;margin:10px}

fieldset{float:left;width:370px;
    margin: 1em 0;padding: 0;
    border: none;border-top: 1px solid #99A0FA;
    background: #BDC1FA url(gradient.png) repeat-x top}

Procediamo quindi a definire le regole per i vari elementi dei form. Per le legend viene specificato il testo in grassetto, il colore del testo e lo sfondo: quest’ultimo è necessario per coprire il bordo superiore del fieldset in Firefox. L’asterisco per evidenziare i campi obbligatori, incluso dentro un tag b, verrà reso rosso. Per quanto riguarda i paragrafi, vengono specificati i margini così da distanziarli dai bordi del form. Ecco le tre regole:

legend{font-weight:bold;color: #333;background:#FFF}
form b{color:#F00}
form p{margin:0.5em 10px}

Arriviamo quindi alla parte centrale dell’esempio, ovvero i div: anche in questo caso si è usata la float nearly everything per contenere i float. Viene specificato un padding superiore di 10px, e un padding inferiore di 12px così da lasciare due pixel in più per il bordo di separazione, che in realtà è realizzato con una piccola immagine di sfondo che si ripete orizzontalmente sul fondo. Ecco la regola per intero:

fieldset div{float:left;width:100%;
    padding: 10px 0 12px;
    background: url(line.png) repeat-x bottom}

Ora le label: queste verranno rese float a sinistra con una larghezza di 120 pixel con un margine sinistro di 10px. Per evitare il doubled float margin, ovvero il bug di Internet Explorer che raddoppia il margine concorde con il lato di elementi float di cui abbiamo parlato nell’articolo sulla Risoluzione dei problemi di CSS, useremo la dichiarazione display:inline. Infine la dichiarazione line-height:23px renderà le label con un altezza all’incirca pari a quella degli input e centrerà il testo al loro interno:

label{float:left;width:120px;
    display: inline;margin-left: 10px;
    line-height:23px}

Non ci rimane quindi sistemare gli elementi particolari, ovvero le etichette dei radiobutton, dei checkbox e del bottone di submit che avranno un margine sinistro di 130px per allinearsi con gli altri elementi di form:

div#confirm-address label,div#sports label,input#go{
    margin-left:130px}

Il nostro esempio è così ultimato: rivediamolo. La compatibilità è decisamente buona: è stato testato in IE5, IE5.5, IE6, IE7, Opera, Firefox e Safari. In conclusione segnalo due letture di approfondimento per i form, ovvero Elementi essenziali e supplementari nella costruzione dei form e Impaginare i form, pubblicati qui su HTML.it. Gli esempi sono contenuti in questo pacchetto zip.

Se vuoi aggiornamenti su Form con i CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Form con i CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy