Controlli Form supportate
Bootstrap supporta i seguenti controlli modulo:
- input
- textarea
- checkbox
- radio
- select
Bootstrap ingresso
Bootstrap supporta tutti i tipi di HTML5 input: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel , e color .
Nota: Gli ingressi saranno non essere completamente in stile se il loro tipo non è correttamente dichiarato!
Il seguente esempio contiene due elementi di input; uno di tipo testo e uno di tipo Password:
Esempio
<div class="form-group">
<label for="usr">Name:</label>
<input
type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input
type="password" class="form-control" id="pwd">
</div> Prova tu stesso " Bootstrap Textarea
L'esempio che segue contiene una textarea :
Esempio
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div> Prova tu stesso " Bootstrap Caselle di controllo
Le caselle di controllo vengono utilizzati se si desidera che l'utente per selezionare un qualsiasi numero di opzioni da un elenco di opzioni preimpostate.
L'esempio che segue contiene tre caselle di controllo. L'ultima opzione è disabilitata:
Esempio
<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="checkbox disabled">
<label><input type="checkbox" value=""
disabled>Option 3</label>
</div> Prova tu stesso " Utilizzare il .checkbox-inline di classe, se si desidera che le caselle di controllo per comparire sulla stessa linea:
Esempio
<label class="checkbox-inline"><input type="checkbox"
value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label
class="checkbox-inline"><input type="checkbox" value="">Option 3</label> Prova tu stesso " Bootstrap Radio Pulsanti
Radio pulsanti vengono utilizzati se si desidera limitare l'utente a una sola selezione da un elenco di opzioni preimpostate.
L'esempio che segue contiene tre pulsanti di scelta. L'ultima opzione è disabilitata:
Esempio
<div class="radio">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<div class="radio">
<label><input
type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div> Prova tu stesso " Utilizzare il .radio-inline di classe, se si desidera che i pulsanti di opzione ad apparire sulla stessa linea:
Esempio
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
Prova tu stesso " Bootstrap Select List
Selezionare le liste vengono utilizzati se si vuole consentire all'utente di scegliere tra più opzioni.
L'esempio che segue contiene un elenco a discesa (elenco di selezione):
Esempio
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div> Prova tu stesso "