I Framework per il Web - HTML5 con CSS e JavaScript - page 247

Esempio 11.9
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username"
placeholder="Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password"
placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Ricordami
</label>
</div>
<button type="submit" class="btn btn-de-
fault">Login</button>
</form>
Il codice HTML è abbastanza semplice e quindi, come al solito, sono le classi CSS a fare il
lavoro. La classe form-group imposta i margini tra gli oggetti, mentre la classe form-
control specifica che il controllo di input si deve vedere sotto la label. La classe chec-
kbox , invece, imposta semplicemente i margini, in quanto i tag label e input sono
renderizzati inline per default e quindi sono visualizzati uno di fianco all'altro.
Gli oggetti di una form possono essere orientati anche in modo orizzontale, aggiungen-
do al tag form la classe CSS form-inline . Il risultato è visibile nella figura 11.4 .
Figura 11.4 - Una form di login orizzontale con Bootstrap.
Esiste un terzo tipo di form che è un ibrido dei due tipi visti finora: i campi sono uno sotto
l'altro e le label sono di fianco al campo, così come nella figura 11.5 .