Form - Reference Bootstrap

Indice dei contenuti

Bootstrap consente una grande flessibilità nella configurazione dei form. Iniziamo soffermandoci sulla gestione del layout.

Configurazione di base

Lavorando con i moduli di Bootstrap c'è un fattore da tenere primariamente in considerazione: tutti i campi per l'input dei form (<input>, <textarea> e <select>) hanno di default una larghezza del 100%. Cosa comporta? Che i campi si estendono orizzontalmente adattandosi alla larghezza dell'elemento che li contiene.

input,
select,
textarea {
  width: 100%;
}

Tenendo conto di questo fattore, nella configurazione di base possiamo strutturare un modulo in questo modo:

<form>
 <fieldset>
  <div class="form-group"> 
   <label for="nome">Nome</label>
   <input type="text"  class="form-control" id="nome" placeholder="Inserisci il nome...">
  </div>
  <div class="form-group">
   <label for="cognome">Cognome</label>
   <input type="text" class="form-control" id="cognome" placeholder="Inserisci il cognome...">
  </div>
  <div class="form-group">
   <label for="email">Email</label>
   <input type="text" class="form-control" id="email" placeholder="Inserisci l'indirizzo email...">
  </div>
  <div class="form-group">
   <label for="stato">Nazione</label>
   <select  class="form-control" id="stato">
    <option>Italia</option>
    <option>Francia</option>
    <option>Germania</option>
   </select>
  </div>
   <div class="checkbox">
     <label>
     <input type="checkbox"> Ricorda i miei dati
     </label>
   </div>
   <button type="submit" class="btn btn-default">Invia</button>
 </fieldset>
</form>

Come si nota, i campi si adattano alla larghezza del contenitore, le label si dispongono sopra gli input corrispondenti. Ogni gruppo formato dall'input e dalla label viene inserito in un elemento con classe .form-group, con l'eccezione del div.checkbox che racchiude il checkbox. Sia la classe .form-group sia la classe .checkbox servono a gestire al meglio fattori come la spaziatura e l'allineamento.

Tutti gli input, tranne checkbox e radio button, vanno definiti con la classe .form-control.

Controllare la larghezza degli input e del form

Per avere un controllo preciso sulla configurazione del layout del form e sulla larghezza degli input possiamo seguire due strade:

inserire il modulo, nel contesto della griglia, in una colonna che abbia la larghezza per noi ottimale; in questo caso il markup rimane invariato rispetto all'esempio visto in precedenza;
aggiungere, nel contesto del form, una serie di righe e colonne che racchiudano gli input e che siano definite con le stesse modalità della griglia.

In questo secondo caso, il markup del form risulta più complesso, ma è senz'altro il metodo che consente un controllo più dettagliato. Nella pratica, si tratta di racchiudere ogni blocco del form in un div con classe .row e quindi in un altro div con le classi per le colonne. Riprendiamo e modifichiamo l'esempio di prima:

<form>
 <fieldset>
   
   <div class="row">
   <div class="col-sm-5 col-lg-5">
   <div class="form-group">
   <label for="nome">Nome</label>
   <input type="text" class="form-control" id="nome" placeholder="Inserisci il nome...">
   </div>
   </div>
   </div>
   
   <div class="row">
   <div class="col-sm-5 col-lg-5">
   <div class="form-group">
   <label for="cognome">Cognome</label>
   <input type="text" class="form-control" id="cognome" placeholder="Inserisci il cognome...">
   </div>
   </div>
   </div>
   
   <div class="row">
   <div class="col-sm-5 col-lg-5">
   <div class="form-group">
   <label for="email">Email</label>
   <input type="text" class="form-control" id="email" placeholder="Inserisci l'indirizzo email...">
   </div>
   </div>
   </div>
   
   <div class="row">
   <div class="col-sm-5 col-lg-5">
   <div class="form-group">
   <label for="stato">Nazione</label>
   <select  class="form-control"id="stato">
    <option>Italia</option>
    <option>Francia</option>
    <option>Germania</option>
   </select>
   </div>
   </div>
   </div>
   <div class="row">
   <div class="col-sm-5 col-lg-5">
   <div class="checkbox">
     <label>
       <input type="checkbox"> Ricorda i miei dati
     </label>
   </div>
   </div>
   </div>
   
   <button type="submit" class="btn btn-default">Invia</button>
 </fieldset>
</form>

Form orizzontale

Una variante di layout per i form è quella che consente di disporre la label accanto al loro input. È sufficiente aggiungere al tag <form> la classe .form-horizontal. In questa configurazione, dovremo assegnare le classi per dimensionare le colonne anche alle label. I controlli sono sempre racchiusi in un div con classe .form-group. La classe .control-label applicata alle label le allinea a destra e le centra verticalmente rispetto al campo corrispondente. La struttura suggerita dagli sviluppatori di Bootstrap è questa:

<form class="form-horizontal">
 <fieldset>
   
   <div class="form-group">
   <label for="nome" class="col-sm-2 col-lg-2 control-label">Nome</label>
   <div class="col-sm-5 col-lg-5">
   <input type="text" class="form-control" id="nome" placeholder="Inserisci il nome...">
   </div>
   </div>
   
   <div class="form-group">
   <label for="cognome" class="col-sm-2 col-lg-2 control-label">Cognome</label>
   <div class="col-sm-5 col-lg-5">
   <input type="text"class="form-control"  id="cognome" placeholder="Inserisci il cognome...">
   </div>
   </div>
   
   <div class="form-group">
   <label for="email" class="col-sm-2 col-lg-2 control-label">Email</label>
   <div class="col-sm-5 col-lg-5">
   <input type="text"class="form-control"  id="email" placeholder="Inserisci l'indirizzo email...">
   </div>
   </div>
   
   <div class="form-group">
   <label for="stato" class="col-sm-2 col-lg-2 control-label">Nazione</label>
   <div class="col-sm-5 col-lg-5">
   <select class="form-control" id="stato">
    <option>Italia</option>
    <option>Francia</option>
    <option>Germania</option>
   </select>
   </div>
   </div>
   
   <div class="form-group">
   <div class="col-sm-5 col-lg-5 col-sm-offset-2">
   <div class="checkbox">
     <label>
       <input type="checkbox"> Ricorda i miei dati
     </label>
   </div>
   </div>
   </div>
   <div class="form-group">
   <div class="col-sm-5 col-lg-5 col-sm-offset-2">
   <button type="submit" class="btn btn-default">Invia</button>
   </div>
   </div>
 </fieldset>
</form>

Form con campi sulla stessa riga

Un'altra opzione di layout si presta per form molto sintetici, con massimo due campi e un pulsante, come quelli di login con user e password. Prevede la disposizione degli input sulla stessa riga, uno accanto all'altro.

Per ottenere questo risultato dovremo innanzitutto aggiungere al tag <form> la classe .form-inline. E poi impostare una larghezza fissa per i campi di input che vada a sovrascrivere il valore default del 100%. L'aggiunta di questa larghezza va fatta nel CSS con le nostre impostazioni personalizzate. Vediamo un esempio.

Con questo markup andiamo a soddisfare il primo prerequisito:

<form class="form-inline">
  <input type="text" class="form-control" placeholder="Nome utente">
  <input type="password" class="form-control" placeholder="Password">
  <button type="submit" class="btn btn-default">Login</button>
</form>

Nel CSS basterà usare una regola come questa per dimensionare gli input:

.form-inline input {width: 170px}

Bootstrap supporta tutti i tipi di input previsti per i form, compresi i nuovi tipi introdotti in HTML5.

Dimensione del testo e altezza nei campi dei form

Rispetto al testo e alla tipografia, input e controlli ereditano le impostazioni globali definite per il body.

Sono comunque disponibili due classi ad hoc per ingrandire o rimpicciolire rispetto al default le dimensioni del testo. La modifica ha effetto anche sull'altezza del campo.

Con la classe .input-lg applicata un campo ingrandiamo la dimensione del testo:

<input class="form-control input-lg" type="text" placeholder=".input-lg">

Ecco il confronto con un campo definito con le impostazioni di default:

La classe .input-sm produce l'esito opposto, rimpicciolendo dimensione del testo e altezza del campo:

<input class="form-control input-sm" type="text" placeholder=".input-sm">

Tutte le impostazioni relative alla dimensione del testo, al padding e all'altezza dell'input possono essere facilmente personalizzate. Questa la regola che imposta il default:

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

Questa la regola per la variante 'large':

.input-lg {
  height: 56px;
  padding: 14px 16px;
  font-size: 18px;
  border-radius: 6px;
}

select.input-lg {
  height: 56px;
  line-height: 56px;
}

E questa per la variante 'small':

.input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 3px;
}

select.input-sm {
  height: 30px;
  line-height: 30px;
}

Altre opzioni di stile per i campi dei form

La regola vista in precedenza contiene un set di dichiarazioni che contribuiscono a definire globalmente l'aspetto degli input. Riprendiamola:

.form-control {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

Oltre che sulla dimensione del testo, si può intervenire su altre proprietà: il colore del testo, il colore di sfondo, il colore e lo spessore del bordo che circonda il campo, l'arrotondamento dei bordi, l'ombreggiatura interna. La transizione che chiude la regola viene attivata quando l'input riceve il focus. In questo stato, vengono modificati il colore del bordo e i valori per l'ombreggiatura. Questa la regola che definisce i valori per il focus:

.form-control:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

Campi disabilitati

Un attributo speciale destinato agli input dei form e ai pulsanti è disabled. I controlli cui viene applicato risulteranno disabilitati, impossibili da compilare o attivare:

<input type="text" class="form-control" placeholder="Questo campo è disabilitato" disabled>

Label e testo di aiuto

Oltre che da input e pulsanti, un form è caratterizzato anche dalla presenza delle label. Di default ereditano le caratteristiche globali del testo, con un'unica eccezione: il testo è in grassetto. Per apportare ulteriori personalizzazioni questo è il selettore da cui partire:

label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: bold;
}

È anche possibile aggiungere un breve testo informativo che dia suggerimenti per esempio all'utente sulle regole di compilazione del campo. Di default è prevista la sua collocazione al di sotto del campo. L'elemento che racchiude questo testo va definito con la classe .help-block:

<input type="text" class="form-control" placeholder="Default input">
<p class="help-block">Campo obbligatorio</p>

Campo obbligatorio

Per modificare le proprietà di un testo di aiuto, si parta da questo selettore:

.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
}

Classi per la validazione

Bootstrap contiene tra i suoi stili tre classi speciali che definiscono tre differenti stati dei campi di un form quando vengono sottoposti a validazione. Le tre classi sono:

.has-error: segnala la presenza di un errore nella compilazione;
.has-warning: segnala un avviso;
.has-success: segnala che il campo è stato correttamente.

Queste tre classi sono rappresentate con i colori canonici per questi scenari, rispettivamente il rosso, il giallo e il verde.

L'applicazione delle classi nel contesto della validazione avviene di norma attraverso script ad hoc o l'API per la validazione di HTML5.

Per implementare nel modo corretto questa funzionalità, vanno seguiti due semplici passi:

racchiudere il campo da validare e la sua label in un elemento (div) che abbia una delle tre classi viste qui sopra;
aggiungere alla label la classe .control-label.

<div class="form-group has-warning">
  <label class="control-label" for="inputWarning">Avviso</label>
  <input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError">Errore</label>
  <input type="text" class="form-control" id="inputError">
</div>
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess">Successo</label>
  <input type="text" class="form-control" id="inputSuccess">
</div>

Avviso

Errore

Successo

Per un esempio d'uso reale si provi a validare il form della pagina Contatti della demo.

Guida Boostrap 3 - Reference