Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Gestione dei form in Foundation

Non è previsto l'uso di classi HTML per definire l'aspetto dei campi che costituiscono un modulo, nel CSS gli stili sono applicati ai diversi tipi di input.
Non è previsto l'uso di classi HTML per definire l'aspetto dei campi che costituiscono un modulo, nel CSS gli stili sono applicati ai diversi tipi di input.
Link copiato negli appunti

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:

Figura 1 - Form orizzontale
screenshot

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:

Figura 2 - Top Bar responsiva con il modulo di ricerca in fondo
screenshot

Il secondo form è quello per l'iscrizione alla newsletter. Non ci soffermiamo sul codice visto che ricalca quello visto negli esempi di questa lezione.

Ti consigliamo anche