Bootstrap 4 Input del modulo
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 type="text"e uno di
type="password". Come accennato nel capitolo Moduli, usiamo la .form-controlclasse per definire gli input con un riempimento completo e appropriato, ecc.:
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="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Esempio spiegato
Utilizzare un elemento wrapper con class="form-check"per garantire margini adeguati per etichette e caselle di controllo.
Aggiungi la .form-check-labelclasse per etichettare gli elementi e .form-check-inputper definire correttamente lo stile delle caselle di controllo all'interno del .form-checkcontenitore.
Caselle di controllo in linea
Usa la .form-check-inlineclasse se vuoi che le caselle di controllo appaiano sulla stessa riga:
Esempio
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
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. L'ultima opzione è disabilitata:
Esempio
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Come con le caselle di controllo, usa la .form-check-inlineclasse se vuoi che i pulsanti di opzione appaiano sulla stessa riga:
Esempio
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
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>
Dimensionamento del controllo del modulo
Modifica la dimensione del controllo modulo con .form-control-smo .form-control-lg:
Esempio
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Controllo modulo con testo normale
Utilizzare .form-control-plaintextse si desidera definire lo stile del campo di input come testo normale:
Esempio
<input type="text" class="form-control-plaintext">
File di controllo modulo e intervallo
Aggiungi la .form-control-rangeclasse a input type"range"o .form-control-filea input type"file"per applicare uno stile a un controllo intervallo o a un campo file a larghezza intera:
Esempio
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">