Twitter Bootstrap: come implementare l’uso di form?

Eccoci alla terza lezione del corso sul Twitter Bootstrap. Abbiamo visto finora cos’è il Twitter Bootstrap e come utilizzare il suo potentissimo grid-system all’interno dei nostri progetti. Nella lezione di oggi ti spiegherò in dettaglio gli elementi HTML base e come integrarli nelle tue pagine web.

Quali sono gli stili di default che il Bootstrap associa agli elementi HTML?

Nella scorsa lezione abbiamo visto come gli elementi HTML abbiano uno stile di base utilizzando Normalize.css. Quello che non abbiamo visto è che ci sono alcuni elementi del Bootstrap che ci vengono però forniti già con uno stile CSS personalizzato così da essere pronti all’uso.

Tra questi abbiamo:

• gli elementi tipografici (<h1>…<h6>, <p>, <em>, ecc. )
• gli elementi di tipo codice (<pre> e <code>)
• le tabelle
• le form
• i <button>
• le immagini
• le icone

Vista la quantità di elementi da analizzare e relativi esempi, la lezione sarà suddivisa in due parti. In questa prima parte scoprirai, tra le altre cose, come sia semplice realizzare form molto potenti con pochissime righe di codice; nella seconda parte, invece, approfondirai i button, le immagini e le icone incluse nel Bootstrap.

Iniziamo?

Gli elementi tipografici

Tutti gli elementi HTML utilizzati per il contenuto della pagina sono forniti dal Boostrap con uno stile già personalizzato. Questo significa, ad esempio, che tutti gli elementi di tipo heading (h1, h2, …), i paragrafi, le abbreviazioni, le liste, e così via hanno già uno stile che ci consente di utilizzarli direttamente senza la necessità di assegnare noi uno stile predefinito.

Oltre agli elementi base, ci sono anche delle classi già personalizzate che consentono di modificare il colore degli elementi tipografici. Se ad esempio volessimo mostrare, in seguito alla compilazione di una form, un messaggio con un colore differente a seconda dell’esito dell’operazione potremmo utilizzare una delle seguenti classi:

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

E’ disponibile una lista completa degli stili al seguente link.

Codice

Gli elementi di tipo codice possono essere di due tipi:

• inline (<code>)
• blocco (<pre>)

Anche per questi due elementi è possibile visionare una demo online.

Tabelle

Il Bootstrap fornisce differenti tipologie di classi che possono essere assegnate alle tabelle o ai singoli elementi della tabella rendendo altissimo il numero di combinazioni possibili che possiamo realizzare grazie ad esse.

Lo stile di base di una comune tabella è il seguente:

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        ...
    </tbody>
</table>

Nel caso volessimo alternare il colore delle righe della tabella potremmo assegnare la classe table-striped alla tabella:

<table class="table table-striped">

Per aggiungere un bordo arrotondato alla tabella possiamo utilizzare la classe table-bordered:

<table class="table table-bordered">

Se invece abbiamo la necessità di evidenziare la riga corrente al passaggio del mouse abbiamo a disposizione la classe table-hover:

<table class="table table-hover">

Per una tabella più compatta, senza padding superiori e inferiori alle righe, c’è la classe table-condensed:

<table class="table table-condensed">

Come per gli elementi tipografici, anche per le righe abbiamo a disposizione delle classi per modificare il colore ed enfatizzarle rispetto al resto della tabella. Le classi sono le seguenti:

• success
• error
• warning
• info

e possono essere utilizzate come nell’esempio seguente:

...
  <tr class="success">
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

Un esempio di tutte le tabelle è disponibile al seguente link.

Form

Le form rappresentano sicuramente la sezione che più è stata personalizzata dagli sviluppatori del Bootstrap. Le possibilità di utilizzo e combinazioni dei vari elementi (e relative classi personalizzate) sono davvero infinite. In questo articolo vedremo solo le più comuni ed importanti ma è possibile approfondire la lista completa delle funzionalità a disposizione nella documentazione ufficiale.

Gli elementi di base di una form (input, select, button, ecc.) hanno già uno stile che ci consente di creare in una manciata di minuti una form già funzionante senza bisogno di mettere mano al foglio di stile.

Il codice seguente, ad esempio, ci consente di creare una semplice form con gli elementi più comuni:

<form>
  <fieldset>
    <legend>Legend</legend>
    <label>Label name</label>
    <input type="text" placeholder="Type something…">
    <span class="help-block">Example block-level help text here.</span>
    <label class="checkbox">
      <input type="checkbox"> Check me out
    </label>
    <button type="submit" class="btn">Submit</button>
  </fieldset>
</form>

Il risultato finale è disponibile al seguente link.

Nel caso si avesse il bisogno di avere gli elementi della form in un’unica riga è possibile assegnare la classe form-inline:

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>

Esempio.

Il Bootstrap come principio generale è stato realizzato per venirci incontro nella maggior parte delle esigenze più frequenti. E’ per questo che abbiamo a disposizione altre classi per le form più comuni che quotidianamente abbiamo la necessità di realizzare.

Un altro valido esempio è una form di ricerca:

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>

Esempio.

In alcune form di registrazione, si potrebbe avere l’esigenza di allineare a destra le label in maniera da avere allineati orizzontalmente i vari campi (come ad esempio in alcune form di login). Il codice necessario è il seguente:

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

Esempio.

Ogni form che si rispetti ha la necessità di essere validata. Anche in questo caso ci viene incontro il Bootstrap con alcune classi CSS:

<div class="control-group warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">Something may have gone wrong</span>
  </div>
</div>
<div class="control-group error">
  <label class="control-label" for="inputError">Input with error</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">Please correct the error</span>
  </div>
</div>
<div class="control-group success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">Woohoo!</span>
  </div>
</div>

Esempio.

 Come estendere le form con il Bootstrap?

Finora abbiamo visto come utilizzare le form nella maniera classica. Ci sono però tantissimi altri modi di sfruttare il Bootstrap per potenziare i campi di input e migliorare incredibilmente l’esperienza utente.

E’ possibile infatti anteporre o posporre ad un campo input di tipo testo degli elementi di tipo button, un altro strumento potentissimo messo a disposizione. Un esempio di partenza può essere il seguente:

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Go!</button>
</div>

Esempio.

Le potenzialità del Bootstrap però non si limitano a questo. Possiamo ad esempio utilizzare il button come menu dropdown:

<div class="input-append">
  <input class="span2" id="appendedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

Esempio.

Possiamo anche inserire due menu dropdown:

<div class="input-prepend input-append">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="appendedPrependedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

Esempio.

Conclusioni

In queste prime lezioni non abbiamo ancora scritto una sola riga di codice Javascript eppure abbiamo realizzato degli elementi interattivi anche abbastanza complessi con una semplicità incredibile. Abbiamo visto infatti che sono sufficienti poche classi CSS assegnate a comunissimi elementi HTML per creare, ad esempio, menu dropdown che altrimenti ci avrebbero portato via molto tempo.

Quali sono le tue impressioni sul Bootstrap dopo queste prime lezioni?

Indice della guida

1. Come sviluppare rapidamente applicazioni web?
2. Come utilizzare le griglie?
3. Come implementare l’uso di form e pulsanti?
   • Le form
   • I pulsanti
4. Come creare le interfacce delle nostre applicazioni?
5. Come far interagire gli utenti con le applicazioni?