Abbiamo parlato di form in diverse occasioni qui su HTML.it: a partire dal
layout dei form con i CSS, ai form con i CSS per arrivare ai form grafici
con i CSS. Quello di cui non abbiamo ancora parlato è come ottenere form fluidi,
ovvero form la cui larghezza varia al variare della larghezza della finestra del
browser o del suo contenitore.
La realizzazione di form fluidi con i CSS sarà argomento di questo appuntamento attraverso
due semplici esempi, che potranno essere una buona base di partenza per i vostri
layout liquidi oppure essere facilmente adattati per layout fissi. Cominciamo subito,
non prima di presentare un'anteprima del primo e
del secondo esempio.
Il markup di base
I due esempi che vedremo in questo articolo sono basati sullo stesso markup,
così da mostrare anche la flessibilità dei fogli di stile. Si sono usati label,
fieldset per racchiudere etichette e rispettivi campi di input e dei div
per racchiuderne ogni coppia. L'uso dei div ha una duplice funzione: strutturare il
form così da renderlo agevole anche in assenza di fogli di stile da una parte e una maggiore
flessibilità di personalizzazione con i CSS dall'altra. Ecco un estratto del markup:
<form method="post" action="">
<fieldset>
<legend>Dati personali</legend>
<div>
<label for="user">Nome</label>
<input id="user" name="user">
</div>
<!-- altri elementi -->
<div>
<label for="message">Descrizione</label>
<textarea id="message" name="message" rows=10 cols=20></textarea>
</div>
</fieldset>
<div class="form-button">
<input type="submit" id="go" value="registrati">
</div>
</form>
Primo esempio
Dopo questa breve premessa, siamo pronti a procedere con il primo esempio
di cui vediamo uno screenshot ridotto:
Vediamo passo passo lo sviluppo del CSS. Per prima cosa, gli stili per il form, il
fieldset e la legend: si definisce la larghezza del form in percentuale,
la larghezza minima, un bordo blu e un padding. Si eliminano poi margini, padding e bordi dal
fieldset e infine si definisce il carattere per la legend:
form{width: 30%;min-width: 180px;border: 1px solid #9A9FFF;padding: 3px}
fieldset{border: 0px solid #000;margin: 0;padding: 0}
legend{font: bold small-caps 140%/1.3 "Arial Narrow",arial,sans-serif;
color: #5F78A2}
A questo punto procediamo con i div all'interno del form. Imposteremo
un padding verticale di 5 pixel, e laterale del 3%, il colore di sfondo e del
testo:
form div{padding: 5px 3%;background: #E6E7FD;color:#333}
Ora le due dichiarazione chiave dell'esempio:
le label sono elementi naturalmente inline, rendendole block
si farà in modo che i campi di input e la textarea non seguano sulla stessa linea.
Infine, per questi due elementi si specificherà una larghezza percentuale:
form label{display: block}
fieldset input,textarea{width: 94%}
Il nostro esempio è così ultimato: sono bastate
davvero poche semplici regole CSS.
Secondo esempio
Il secondo esempio si presenta leggermente
più complicato nella sua realizzazione. Prima di procedere con il CSS, vediamo il
suo screenshot:
Per prima cosa gli stili su form, fieldset e legend:
form{width: 30%;min-width: 180px;border: 1px solid #9A9FFF;padding: 3px}
fieldset{border:0px solid;margin: 0;padding: 0}
legend{font: bold small-caps 140%/1.3 "Arial Narrow",arial,sans-serif;
color: #5F78A2}
Ora i div. Dichiareremo il colore di sfondo e del testo,
insieme a un padding verticale di 10 px e un bordo superiore:
form div{padding: 10px 0;background: #eee;
color: #333;border-top: 1px solid #CCC}
Siamo arrivati alla parte centrale dell'esempio: le
etichette e i campi di input. Le prime verranno rese float, di larghezza pari
al 33% e con un padding destro del 2%; il testo verrà allineato a destra e il line-height
sarà di 23pixel così da allinearsi verticalmente con i campi di input. I campi di input
e la textarea verranno dichiarati larghi per una misura pari al 61% del form:
form label{float: left;width: 33%;line-height: 23px;
padding-right: 2%;text-align:right}
fieldset input,textarea{width:61%}
Da notare che il selettore discendente "fieldset input" è stato usato per evitare
che la regola avesse effetto anche sul bottone di submit del form, che si trova
infatti all'esterno del fieldset. Il bottone verrà infatti allineato attraverso
un margine sinistro pari alla larghezza delle etichette più il suo padding:
div.form-button input{margin-left: 35%}
L'esempio è così ultimato: rivediamolo.
Conclusioni
Si conclude qui l'articolo dedicato ai form fluidi. La compatibilità
degli esempi è buona: sono stati testati con successo su Internet Explorer
dalla versione 5 alla 7, oltre che sulle ultime versioni di Opera, Firefox
e Safari.
È importante evidenziare a questo punto l'aspetto fondamentale
nella progettazione di form liquidi: basta specificare la larghezza
di campi di input (e etichette se necessario) in percentuale, come abbiamo fatto negli esempi.
Una nota finale: i form che abbiamo visto, che
si presentano tipicamente a larghezza variabile, possono essere facilmente
resi a larghezza fissa. Basterà infatti solo specificare la larghezza del
form in pixel anzichè in percentuale nella regola relativa. Gli esempi
sono disponibili per il download. Alla prossima.
