Assegnare i giusti stili agli elementi dei form non è un'impresa semplice se non si conoscono alcune caratteristiche peculiari di questo tipo di elementi. In questo articolo ho riassunto alcune dei migliori approcci che ho avuto modo di testare nella pratica quotidiana dello sviluppo di siti web.
Gli elementi dei form, come le immagini, appartengono alla categoria degli elementi rimpiazzati. Tuttavia, se per le immagini era possibile conoscere in anticipo le loro dimensioni intrinseche, questo non vale per gli elementi dei form. Nello specifico, le dimensioni degli elementi dei form vengono determinate dai seguenti fattori:
- larghezza ed altezza dichiarate
- padding e margini dichiarati
- dimensione del font in uso
Per il punto uno bisogna tenere presente il fatto che a volte una dichiarazione di dimensione su un elemento può portare a risultati difformi nei vari browser. Un tipico caso è quello dei bottoni di invio. La soluzione consiste nel lasciare che le dimensioni vengano date in modo automatico tramite la dimensione del font dell'elemento o il suo padding.
Per quanto riguarda il punto due, bisogna considerare il fatto che, per impostazione predefinita, i browser aggiungono sempre del padding ad alcuni elementi dei form, come ad esempio i bottoni di invio. Per il punto tre, bisogna ricordarsi sempre di specificare un font ed una dimensione del font per ogni elemento (per esempio un campo di inserimento del testo). Stranamente, l'ereditarietà applicata agli elementi dei form viene quasi sempre trascurata. Ad esempio:
form * {font: 100%/1 Verdana, sans-serif}Ci si aspetterebbe, in linea teorica, che tutti gli elementi del form debbano avere la dimensione del font specificata. In realtà la regola di cui sopra va riscritta come segue:
input, select {font: 100%/1 Verdana, sans-serif}Questo avviene perchè i browser sono liberi di far prevalere le loro dichiarazioni predefinite sulle dichiarazioni dell'autore.
Nota
Le specifiche CSS non definiscono l'aspetto dei form. Quello che noi vediamo nei vari browser è una tacita convenzione non vincolante. In altre parole, un browser è libero di decidere, ad esempio, se permettere all'autore di assegnare uno stile ai bottoni di invio oppure no, senza con questo violare alcuna regola del W3C. Non bisogna quindi stupirsi del fatto che, in alcuni casi, l'aspetto finale di un form sia molto diverso da browser a browser.
Essendo elementi rimpiazzati, gli elementi dei form sono sensibili alla proprietà vertical-align che ne definisce l'allineamento verticale. Anche l'interlinea (proprietà line-height) contribuisce a tale allineamento.