Non poteva mancare in un framework come Foundation una sezione dedicata alla configurazione dei form. In questo ambito l'approccio è leggermente diverso rispetto agli altri componenti fin qui visti. Non è infatti previsto l'uso di classi HTML per definire l'aspetto dei campi che costituiscono un modulo, nel CSS gli stili sono applicati a partire dai diversi tipi di input.
Tra queste regole CSS una va ricordata, perché è fondamentale ai fini della presentazione dei form: tutti i tipi di input hanno di default una larghezza del 100%. Significa che, non limitando in qualche modo questo parametro, un campo si estenderà per l'intera larghezza della colonna in cui è contenuto.
Poniamo allora di avere a che fare con questo semplice modulo:
<form>
<fieldset>
<label>Nome</label>
<input type="text" placeholder="Inserisci il tuo nome">
<label>Cognome</label>
<input type="text" placeholder="Inserisci il tuo cognome">
<label>Indirizzo e-mail</label>
<input type="text" placeholder="Inserisci la tua e-mail">
<label class="checkbox">
<input type="checkbox"> Confermo i dati
</label>
<button type="submit" class="button large expand">Iscrivimi</button>
</fieldset>
</form>I campi, senza alcuna classe speciale, riceveranno la formattazione impostata nel CSS, ma la loro larghezza è dettata, come si diceva, da quella della colonna in cui si trovano. Ecco un test per verificare.
Vi sono modi per controllare le dimensioni degli input? Certamente sì.
Il primo e più immediato è di collocare il form in una colonna che abbia le dimensioni per noi giuste o accettabili.
Il secondo metodo ci consente di avere un controllo ancora maggiore. Nel contesto del form, infatti, possiamo creare righe e colonne dimensionabili con le classi .small-# e .large-# che abbiamo visto in azione sulla griglia. Di fatto, possiamo creare una griglia ad hoc per strutturare il form come meglio crediamo.
Verifichiamo nel secondo test. Il form è inserito in una colonna con classe .large-8, ma i suoi campi occupano solo metà della larghezza complessiva. È bastato strutturare così il markup:
<form>
<fieldset>
<div class="row">
<div class="small-6 columns">
<label>Nome</label>
<input type="text" placeholder=".small-6">
</div>
</div>
<div class="row">
<div class="small-6 columns">
<label>Cognome</label>
<input type="text" placeholder=".small-6">
</div>
</div>
<div class="row">
<div class="small-6 columns">
<label>Indirizzo e-mail</label>
<input type="text" placeholder=".small-6">
</div>
</div>
<div class="row">
<div class="small-6 columns">
<label class="checkbox">
<input type="checkbox"> Confermo i dati
</label>
</div>
</div>
<div class="row">
<div class="small-6 columns">
<button type="submit" class="button large expand">Iscrivimi</button>
</div>
</div>
</fieldset>
</form>Come si vede, ogni gruppo formato dalla label e dall'input è racchiuso in una .row e in una colonna cui è stata assegnata la classe .small-6 (in questo modo i campi avranno la stessa larghezza su mobile e desktop). Ricordiamo che all'interno di una .row annidata la somma delle colonne è sempre pari a 12, ecco perché impostando .small-6 otteniamo un campo che si estende per la metà della larghezza complessiva.
Questa seconda opzione richiede chiaramente un markup più complesso, ma la flessibilità che garantisce è enorme. Poniamo, per esempio di voler realizzare un form con una label, un campo di testo e un pulsante disposti orizzontalmente:
La struttura è delle più semplici; creiamo una .row dentro il form e al suo interno 3 colonne, ognuna per un elemento del form:
<form>
<fieldset>
<div class="row">
<div class="small-3 columns">
<label class="right inline">Nome</label>
</div>
<div class="small-6 columns">
<input type="text" placeholder=".small-6">
</div>
<div class="small-3 columns">
<button type="submit" class="button small">Login</button>
</div>
</div>
</fieldset>
</form>In questa configurazione è opportuno assegnare alla label le classi right e inline per allinearla al centro rispetto all'input associato.
I form della demo
Nella nostra demo abbiamo impiegato due volte i form, e in entrambi i casi abbiamo sfruttato la griglia per dimensionarli e strutturarli al meglio.
Il primo è il modulo di ricerca inserito sulla Top Bar:
<ul class="right">
<li class="has-form">
<form>
<div class="row collapse">
<div class="small-8 columns">
<input type="text" placeholder="Inserisci un termine">
</div>
<div class="small-4 columns">
<a href="#" class="button">Cerca</a>
</div>
</div>
</form>
</li>
</ul>La classe .collapse applicata alla .row serve per forzare il clear del float e posizionare il modulo sul fondo quando la Top Bar viene visualizzata su dispositivi mobili:
Il secondo form è quello per l'iscrizione alla newsletter. Non ci soffermiamo sul codice visto che ricalca quello visto negli esempi di questa lezione.