Input del modulo Bootstrap
Controlli dei moduli supportati
Bootstrap supporta i seguenti controlli del modulo:
- ingresso
- area di testo
- casella di controllo
- Radio
- Selezionare
Ingresso Bootstrap
Bootstrap supporta tutti i tipi di input HTML5: testo, password, datetime, datetime-local, data, mese, ora, settimana, numero, email, URL, ricerca, tel e colore.
Nota: gli input NON avranno uno stile completo se il loro tipo non è dichiarato correttamente!
L'esempio seguente 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>
Area di testo Bootstrap
L'esempio seguente contiene un'area di testo:
Esempio
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Caselle di controllo Bootstrap
Le caselle di controllo vengono utilizzate se si desidera che l'utente selezioni un numero qualsiasi di opzioni da un elenco di opzioni preimpostate.
L'esempio seguente 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>
Usa la .checkbox-inlineclasse se vuoi che le caselle di controllo appaiano sulla stessa riga:
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>
Pulsanti di opzione Bootstrap
I pulsanti di opzione vengono utilizzati se si desidera limitare l'utente a una sola selezione da un elenco di opzioni preimpostate.
L'esempio seguente contiene tre pulsanti di opzione. La prima opzione è selezionata per impostazione predefinita e l'ultima opzione è disabilitata:
Esempio
<div class="radio">
<label><input type="radio" name="optradio"
checked>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>
Usa la .radio-inlineclasse se vuoi che i pulsanti di opzione appaiano sulla stessa riga:
Esempio
<label class="radio-inline"><input type="radio" name="optradio"
checked>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>
Elenco di selezione Bootstrap
Gli elenchi di selezione vengono utilizzati se si desidera consentire all'utente di scegliere tra più opzioni.
L'esempio seguente 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>