Moduli con stile: usare i CSS con i form

Tra gli aspetti meno noti, ma più utili, nell’uso dei CSS possiamo annoverare le varie possibilità che ci offrono per definire l’aspetto visuale dei form. In questo articolo vedremo come con poche istruzioni sia possibile dare un tocco di stile a questi elementi per adeguarli al design globale delle nostre pagine: a cosa serve studiare con cura la scelta dei colori o dei font se poi siamo costretti a rassegnarci di fronte alla grigia monotonia di un modulo?

Chiariamo subito un aspetto cruciale. Sulla definizione degli stili per i form i browser recenti (diciamo dalla versione 5 in poi per quelli più comuni) non offrono affatto un supporto uniforme. Opera fallisce miseramente anche sugli aspetti più semplici; Explorer 5/6 per Windows presenta incompatibilità complessivamente marginali.

I browser basati su Gecko (quindi Mozilla e Netscape 6/7) sono, insieme a Explorer 5 per Mac, gli strumenti che offrono il supporto più ampio degli standard in questo particolare ambito. Proprio per questo, abbiamo deciso di concentrarci solo sulle applicazioni cross-browser, citando quando opportuno alcune funzionalità degne di rilievo che al contrario offrono un supporto solo parziale.

Questo articolo, infine, può essere visto come un’utile continuazione di un altro già pubblicato in questa sezione, I Form: segreti e trucchi di personalizzazione, dove vengono presi in considerazione anche alcuni aspetti di compatibilità con Netscape 4.

Iniziamo col dare un’occhiata al documento di esempio. All’inizio della pagina un form “senza stile” su cui eserciteremo la nostra abilità. Per allineare gli elementi del modulo abbiamo usato una classica tabella. È tuttora il metodo più valido e semplice, a meno di non sfruttare le capacità di posizionamento dei CSS.

Iniziamo dunque la nostra opera di riscrittura. Andiamo avanti.

Modificare l’elemento FORM

Cominciamo la nostra opera di restyling (visualizza l’esempio) dall’elemento contenitore <form>. Nell’esempio abbiamo assegnato al form l’id “form2” di cui abbiamo definito poi gli stili.

Su cosa possiamo agire? Sui più importanti elementi visuali e di formattazione: colore di sfondo, padding e margini, bordi. Abbiamo anche agito sulla proprietà width. Ciò può essere utile per dare al form una dimensione fissa e che si adatti al nostro layout.

Essendo infatti un elemento blocco (come un paragrafo <p>, per intenderci) un form occupa di default tutta la larghezza della pagina. La scelta di settare una dimensione fissa diventa poi quasi obbligatoria se si usano bordi: provate a impostare un bordo senza larghezza. L’effetto visivo non è dei più esaltanti. È possibile poi impostare le caratteristiche dei font. Se non abbiamo particolari esigenze, esse saranno ereditate da tutti gli elementi interni, dal testo ai caratteri dei campi input. Ecco il codice:

#form2 {
    background: #FFFFFF;
    padding: 10px;
    width: 500px;
    border: 1px solid #000000;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    }

Modificare i campi di testo

Subito dopo passiamo a modificare i campi di testo. La classe usata per modificarne la presentazione è “input.testo“. Anche qui per ottenere buoni risultati visivi si possono modificare il colore di sfondo e il font. In questo caso è importante, ovviamente, impostare un colore ben in contrasto con lo sfondo, e magari dare un bel grassetto. Se vogliamo spaziare rispetto al bordo esterno del campo il punto di inserimento del testo si può agire sul padding (basterà quello sinistro).

La proprietà più importante è però quella dei bordi: in questo modo riusciamo a modificare davvero radicalmente l’aspetto tradizionale dell’input. La scelta è ampia e comprende tutte le opzioni per il bordo definite nei CSS: solid, dotted, dashed, double, groove, ridge, inset, outset. A voi l’onere e il piacere di provare le varie soluzioni.

Nell’esempio abbiamo anche settato la larghezza con width: problemi di allineamento e dimensioni risolti in un colpo solo. Un modo elegante ed efficace per fare a meno dell’attributo “size”. Potremo invece continuare a usare un altro importante attributo, “maxlenght”, quello che ci consente di impostare il numero massimo di caratteri che l’utente può inserire. Anche qui il codice del CSS:

input.text {
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background: #CCCCCC;
    border: 1px solid #000000;
    padding-right: 5px;
    padding-left: 5px;
    width: 140px;
    }

Modificare il pulsante di invio

Dai campi di testo al pulsante di invio. Le opzioni di formattazione sono simili a quelle viste per i textfields. E anche qui è con i bordi che operiamo i cambiamenti più visibili e importanti. Il codice, in base a quello che abbiamo già detto, dovrebbe essere auto-esplicativo:

input.pulsante {
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background: #CCCCCC;
    text-align: center;
    padding: 5px;
    width: 140px;
    border: 1px solid #000000;
    margin-top: 10px;
    }

Vediamo ora qualcosa di più interessante e di interattivo.

Agire sullo stile in base allo stato dei campi

Finora ci siamo concentrati su proprietà cross-browser e con nessun problema di compatibilità (non considero nemmeno Netscape 4, per cui rimando all’articolo citato all’inizio). Mi piace però segnalarvi un paio di proprietà davvero interessanti che ahimè non trovano supporto nel più diffuso tra i browser: Explorer 5/6 su Windows. I possessori di Mozilla, Netscape 6/7 o Explorer Mac potranno invece valutarne efficacia e attrattive.

Si tratta del supporto di tre delle cosiddette pseudo-classi. Nei CSS una pseudo-classe definisce lo stile di un elemento in base allo stato. L’utilizzo più classico e diffuso è quello dei vari :link, :hover o :visited per Definire gli stili dei link con i CSS: tra estetica e usabilità.. Come i link, anche i campi di un form possono avere particolari condizioni di stato.

Esempio: quando inseriamo il cursore in un campo di testo, si dice che quel campo ha in quel momento il focus. Bene: un ottimo effetto può essere quello di cambiare il colore di sfondo dell’input quando esso riceve il focus. Ecco il semplicissimo frammento di codice:

input.text:focus {
    background: #CCCCFF;
    }

Allo stesso modo possiamo usare le pseudo-classi :hover e :active per modificare il comportamento e il colore di un pulsante al passaggio del mouse e quando viene premuto: in pratica un rollover. È importante in questo caso definire prima lo stile per :hover rispetto a quello di :active. Codice:

input.pulsante:hover {
    background: #CCCCFF;
    }
    input.pulsante:active {
    background: #00CCFF;
    }

Per ottenere lo stesso effetto in Explorer Win dobbiamo ricorrere ad uno swap della classe, come ben spiegato da Saibal nell’I Form: segreti e trucchi di personalizzazione.

Esercizi di stile

Nell’esempio 3 ci siamo un pò divertiti. Abbiamo testato la capacità di impostare un’immagine di sfondo per gli elementi di un form. Diciamo che è per siti moooolto cool e per maniaci della texture, ma funziona bene in tutti i browser degni di questo nome. Nell’esempio noterete la texture soprattutto nella textarea, elemento su cui l’effetto è più visibile e realistico, viste le dimensioni. Il codice usato per la textarea vale per tutti (vi rimando alla pagina per il codice completo del CSS):

textarea.sfondo {
    font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    background: #CCCCCC url(sfondo.gif);
    width: 140px;
    border: 1px solid #000000;
    padding-right: 5px;
    padding-left: 5px;
    }

L’esempio 4 riguarda invece l’elemento <select>. Qui le possibilità di intervento sono minori ma gli effetti comunque interessanti. Tanto per cominciare: non è possibile modificare l’aspetto con i bordi. E questo è un problema: perchè in un modulo come quelli visti prima, stonerebbe un pò un select con il classico bordo rialzato. Ma andiamo oltre. Possiamo tranquillamente impostare le caratteristiche dei font, il colore di sfondo e la larghezza (attenzione se avete testi per le opzioni un pò lunghi!). Ecco come abbiamo definito gli stili del nostro select:

#select {
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    background: #CCCCCC;
    width: 170px;
    }

È possibile poi intervenire anche sui componenti di questo tipo di elemento: parlo del classico <option>, ma anche del meno noto ma utilissimo <optgroup>. Nell’esempio abbiamo creato appunto tre gruppi di opzioni assegnando a ciascuno una classe:

<select name=”select” id=”select” size=”1″>

<option value=”” selected id=”selezionato”>Scegli la provincia</option>
<optgroup class=”opt1″ label=”Lombardia”>

…………………………………

</optgroup>
<optgroup class=”opt2″ label=”Toscana”>

…………………………………

</optgroup>
<optgroup class=”opt3″ label=”Sicilia”>

………………………………..

</optgroup>
</select>

Per ciascuna classe abbiamo impostato semplicemente un diverso colore di sfondo, lasciando che venissero ereditate le impostazioni per i font:

.opt1 {
    background: #CCCCCC;
    }
    .opt2 {
    background: #CCCCFF;
    }
    .opt3 {
    background: #FFCCFF;
    }

L’effetto non è solo esteticamente gradevole, ma rende più facilmente leggibili le diverse opzioni. La stessa cosa si può fare sul tag <option>, ma se sono molte risulta un pò complicato impostare un gran numero di classi per ciascuna di esse.

Ricordiamo che è possibile intervenire sui Coloriamo scroll-bars e form con i CSS, ma solo con Explorer 5.5/6 per Win.

Rimangono un pò fuori dal gioco checkbox e Radio Button. L’unica proprietà su cui vale la pena intervenire per questi minuscoli campi è il colore di sfondo. Se poi volete un checkbox enorme vi basta impostare adeguatamente la proprietà width…A voi il piacere della scoperta. Alla prossima.