Bootstrap - Moduli
In questo capitolo studieremo come creare moduli con facilità utilizzando Bootstrap. Bootstrap lo rende facile con il semplice markup HTML e classi estese per diversi stili di moduli. In questo capitolo studieremo come creare form con facilità usando Bootstrap.
Layout del modulo
Bootstrap ti fornisce i seguenti tipi di layout di modulo:
- Forma verticale (predefinita)
- Modulo in linea
- Forma orizzontale
Forma verticale o di base
La struttura di base del modulo viene fornita con Bootstrap; i singoli controlli del modulo ricevono automaticamente uno stile globale. Per creare un modulo di base, procedi come segue:
Aggiungi un modulo di ruolo all'elemento <form> padre.
Avvolgi etichette e controlli in un <div> con class .form-group . Ciò è necessario per una spaziatura ottimale.
Aggiungi una classe di .form-control a tutti gli elementi testuali <input>, <textarea> e <select>.
<form role = "form">
<div class = "form-group">
<label for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>
<div class = "form-group">
<label for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
<p class = "help-block">Example block-level help text here.</p>
</div>
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>Modulo in linea
Per creare un modulo in cui tutti gli elementi sono in linea, allineati a sinistra e le etichette sono a fianco, aggiungi la classe .form-inline al tag <form>.
<form class = "form-inline" role = "form">
<div class = "form-group">
<label class = "sr-only" for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>
<div class = "form-group">
<label class = "sr-only" for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
</div>
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>Per impostazione predefinita, gli input, le selezioni e le aree di testo hanno una larghezza del 100% in Bootstrap. È necessario impostare una larghezza sui controlli del modulo quando si utilizza il modulo inline.
Usando la classe .sr-only puoi nascondere le etichette dei form inline.
Forma orizzontale
I moduli orizzontali si distinguono dagli altri non solo nella quantità di markup, ma anche nella presentazione del modulo. Per creare un modulo che utilizza il layout orizzontale, procedi come segue:
Aggiungi una classe di .form-horizontal all'elemento genitore <form>.
Avvolgi etichette e controlli in un <div> con class .form-group .
Aggiungi una classe di .control-label alle etichette.
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label for = "firstname" class = "col-sm-2 control-label">First Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
</div>
</div>
<div class = "form-group">
<label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
</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">Sign in</button>
</div>
</div>
</form>Controlli modulo supportati
Bootstrap supporta nativamente i controlli di form più comuni principalmente input, textarea, checkbox, radio e select.
Ingressi
Il campo di testo del modulo più comune è il campo di input. Qui è dove gli utenti inseriranno la maggior parte dei dati essenziali del modulo. Bootstrap offre supporto per tutti i tipi di input HTML5 nativi: testo, password, datetime, datetime-local, data, mese, ora, settimana, numero, e-mail, URL, ricerca, telefono e colore . La dichiarazione del tipo corretta è necessaria per rendere gli input completamente stilizzati.
<form role = "form">
<div class = "form-group">
<label for = "name">Label</label>
<input type = "text" class = "form-control" placeholder = "Text input">
</div>
</form>Textarea
L'area di testo viene utilizzata quando sono necessarie più righe di input. Modificare l' attributo delle righe secondo necessità (meno righe = riquadro più piccolo, più righe = riquadro più grande).
<form role = "form">
<div class = "form-group">
<label for = "name">Text Area</label>
<textarea class = "form-control" rows = "3"></textarea>
</div>
</form>Caselle di controllo e pulsanti di opzione
Le caselle di controllo ei pulsanti di opzione sono ottimi quando desideri che gli utenti scelgano da un elenco di opzioni preimpostate.
Quando si crea un modulo, utilizzare la casella di controllo se si desidera che l'utente selezioni un numero qualsiasi di opzioni da un elenco. Usa la radio se vuoi limitare l'utente a una sola selezione.
Usa .checkbox-inline o .radio-inline class per una serie di checkbox o radio per i controlli visualizzati sulla stessa riga.
L'esempio seguente mostra entrambi i tipi (predefinito e inline):
<label for = "name">Example of Default Checkbox and radio button </label>
<div class = "checkbox">
<label>
<input type = "checkbox" value = "">Option 1
</label>
</div>
<div class = "checkbox">
<label>
<input type = "checkbox" value = "">Option 2
</label>
</div>
<div class = "radio">
<label>
<input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
</label>
</div>
<div class = "radio">
<label>
<input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
Option 2 - selecting it will deselect option 1
</label>
</div>
<label for = "name">Example of Inline Checkbox and radio button </label>
<div>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
</label>
<label class = "checkbox-inline">
<input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
</label>
<label class = "checkbox-inline">
<input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
</label>
</div>Seleziona
Una selezione viene utilizzata quando si desidera consentire all'utente di scegliere tra più opzioni, ma per impostazione predefinita ne consente solo una.
Usa <select> per le opzioni dell'elenco con cui l'utente ha familiarità, come stati o numeri.
Usa multiple = "multiple" per consentire agli utenti di selezionare più di un'opzione.
L'esempio seguente mostra entrambi i tipi (select e multiple):
<form role = "form">
<div class = "form-group">
<label for = "name">Select list</label>
<select class = "form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for = "name">Mutiple Select list</label>
<select multiple class = "form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>Controllo statico
Usa la classe .form-control-static su un <p>, quando devi inserire testo normale accanto a un'etichetta del modulo all'interno di un modulo orizzontale.
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Email</label>
<div class = "col-sm-10">
<p class = "form-control-static">[email protected]</p>
</div>
</div>
<div class = "form-group">
<label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
<div class = "col-sm-10">
<input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
</div>
</div>
</form>Stati di controllo del modulo
Oltre allo stato : focus (cioè, un utente fa clic sull'input o su di esso), Bootstrap offre stili per input disabilitati e classi per la convalida del modulo.
Focus sull'input
Quando un input riceve : focus , il contorno dell'input viene rimosso e viene applicata una casella-ombra .
Input disabilitati
Se è necessario disabilitare un input, la semplice aggiunta dell'attributo disabled non solo lo disabiliterà; cambierà anche lo stile e il cursore del mouse quando il cursore passa sopra l'elemento.
Fieldset disabilitati
Aggiungi l'attributo disabled a un <fieldset> per disabilitare tutti i controlli all'interno di <fieldset> contemporaneamente.
Stati di convalida
Bootstrap include stili di convalida per errori, avvisi e messaggi di successo. Per usarlo, aggiungi semplicemente la classe appropriata ( .has-warning, .has-error o .has-success ) all'elemento genitore.
L'esempio seguente mostra tutti gli stati di controllo del modulo:
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Focused</label>
<div class = "col-sm-10">
<input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
</div>
</div>
<div class = "form-group">
<label for = "inputPassword" class = "col-sm-2 control-label">
Disabled
</label>
<div class = "col-sm-10">
<input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
</div>
</div>
<fieldset disabled>
<div class = "form-group">
<label for = "disabledTextInput" class = "col-sm-2 control-label">
Disabled input (Fieldset disabled)
</label>
<div class = "col-sm-10">
<input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
</div>
</div>
<div class = "form-group">
<label for = "disabledSelect" class = "col-sm-2 control-label">
Disabled select menu (Fieldset disabled)
</label>
<div class = "col-sm-10">
<select id = "disabledSelect" class = "form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class = "form-group has-success">
<label class = "col-sm-2 control-label" for = "inputSuccess">
Input with success
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputSuccess">
</div>
</div>
<div class = "form-group has-warning">
<label class = "col-sm-2 control-label" for = "inputWarning">
Input with warning
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputWarning">
</div>
</div>
<div class = "form-group has-error">
<label class = "col-sm-2 control-label" for = "inputError">
Input with error
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputError">
</div>
</div>
</form>Dimensionamento del controllo del modulo
Puoi impostare l'altezza e la larghezza dei moduli utilizzando rispettivamente classi come .input-lg e .col-lg- * . Il seguente esempio lo dimostra:
<form role = "form">
<div class = "form-group">
<input class = "form-control input-lg" type = "text" placeholder =".input-lg">
</div>
<div class = "form-group">
<input class = "form-control" type = "text" placeholder = "Default input">
</div>
<div class = "form-group">
<input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
</div>
<div class = "form-group"></div>
<div class = "form-group">
<select class = "form-control input-lg">
<option value = "">.input-lg</option>
</select>
</div>
<div class = "form-group">
<select class = "form-control">
<option value = "">Default select</option>
</select>
</div>
<div class = "form-group">
<select class = "form-control input-sm">
<option value = "">.input-sm</option>
</select>
</div>
<div class = "row">
<div class = "col-lg-2">
<input type = "text" class = "form-control" placeholder = ".col-lg-2">
</div>
<div class = "col-lg-3">
<input type = "text" class = "form-control" placeholder = ".col-lg-3">
</div>
<div class = "col-lg-4">
<input type = "text" class = "form-control" placeholder = ".col-lg-4">
</div>
</div>
</form>Testo guida
I controlli del modulo Bootstrap possono avere un testo della guida a livello di blocco che scorre con gli input. Per aggiungere un blocco di contenuto a larghezza intera, usa il blocco .help dopo <input>. Il seguente esempio lo dimostra:
<form role = "form">
<span>Example of Help Text</span>
<input class = "form-control" type = "text" placeholder = "">
<span class = "help-block">
A longer block of help text that breaks onto a new line and may extend beyond one line.
</span>
</form>