Form con i CSS

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:

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:

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:

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:

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:

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:

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.