Lezione 4 - I Form in Bootstrap

Dopo aver visto le tabelle in questo articolo ci concentriamo sull'elemento <form>.

Per questo elemento le classi principali adottate da Bootstrap sono .form-control e .form-group, la prima viene data agli elementi <input>, <textarea> e <select> per dare larghezza 100%, la seconda classe invece viene utilizzata per ottimizzare gli spazi. Vediamo subito un esempio:

Form Base

<form>
 <div class="form-group">
  <label>Nome</label>
  <input type="text" class="form-control" placeholder="Nome">
 </div>
 <div class="form-group">
  <label>Cognome</label>
  <input type="text" class="form-control" placeholder="Cognome">
 </div>
 <button type="submit" class="btn btn-default">Invia</button>
</form>

E il risultato è il seguente:

Form in linea

Con la classe .form-inline data al tag <form> manteniamo nella stessa riga gli elementi.

<form class="form-inline">
 <div class="form-group">
  <label>Nome</label>
  <input type="text" class="form-control" placeholder="Nome">
 </div>
 <div class="form-group">
  <label>Cognome</label>
  <input type="text" class="form-control" placeholder="Cognome">
 </div>
 <button type="submit" class="btn btn-default">Invia</button>
</form>

Anche qui possiamo vedere il risultato qui sotto:

Form con formattazione orizzontale

Se vogliamo allineare i tag <label> e i tag <input> utilizzando una formattazione orizzontale possiamo utilizzare la classe .form-horizontal .

<form class="form-horizontal">
 <div class="form-group">
  <label class="col-sm-2">Nome</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" placeholder="Nome">
  </div>
 </div>
 <div class="form-group">
  <label class="col-sm-2">Cognome</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" placeholder="Cognome">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-default">Invia</button>
  </div>
 </div>
</form>

Per ora tralasciamo le classi .col-sm-2 e .col-sm-10 classi che riprenderemo più avanti nella guida.

Nella prossima lezione vedremo altre classi di Bootstrap da utilizzare nei form.