Moduli Bootstrap
Impostazioni predefinite di Bootstrap
I controlli modulo ricevono automaticamente uno stile globale con Bootstrap:
Tutti gli elementi testuali <input>, <textarea>e
<select>con classe .form-controlhanno una larghezza del 100%.
Layout dei moduli Bootstrap
Bootstrap fornisce tre tipi di layout dei moduli:
- Modulo verticale (questo è predefinito)
- Forma orizzontale
- Modulo in linea
Regole standard per tutti e tre i layout dei moduli:
- Avvolgi le etichette e i controlli dei moduli
<div class="form-group">(necessari per una spaziatura ottimale) - Aggiungi classe a tutti gli elementi
.form-controltestuali<input>,<textarea>e<select>
Modulo verticale Bootstrap (predefinito)
L'esempio seguente crea un modulo verticale con due campi di input, una casella di controllo e un pulsante di invio:
Esempio
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Modulo in linea Bootstrap
In un modulo in linea, tutti gli elementi sono in linea, allineati a sinistra e le etichette sono accanto.
Nota: questo vale solo per i moduli all'interno di finestre di almeno 768px di larghezza!
Regola aggiuntiva per un modulo inline:
- Aggiungi classe
.form-inlineall'elemento<form>
L'esempio seguente crea un modulo inline con due campi di input, una casella di controllo e un pulsante di invio:
Esempio
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Suggerimento: se non includi un'etichetta per ogni input, le utilità per la lettura dello schermo avranno problemi con i tuoi moduli. Puoi nascondere le etichette per tutti i dispositivi, ad eccezione delle utilità per la lettura dello schermo, utilizzando la
.sr-onlyclasse:
Esempio
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Forma orizzontale Bootstrap
Un modulo orizzontale significa che le etichette sono allineate accanto al campo di input (orizzontale) su schermi grandi e medi. Su schermi piccoli (767px e inferiori), si trasformerà in una forma verticale (le etichette sono posizionate sopra ogni input).
Regole aggiuntive per un modulo orizzontale:
- Aggiungi classe
.form-horizontalall'elemento<form> - Aggiungi classe
.control-labela tutti<label>gli elementi
Suggerimento: utilizza le classi di griglia predefinite di Bootstrap per allineare etichette e gruppi di controlli modulo in un layout orizzontale.
L'esempio seguente crea un modulo orizzontale con due campi di input, una casella di controllo e un pulsante di invio.
Esempio
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>