Bootstrap 4 moduli
Impostazioni predefinite di Bootstrap 4
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%.
Bootstrap 4 layout dei moduli
Bootstrap fornisce due tipi di layout dei moduli:
- Modulo in pila (a tutta larghezza).
- Modulo in linea
Bootstrap 4 Modulo impilato
L'esempio seguente crea un modulo in pila con due campi di input, una casella di controllo e un pulsante di invio.
Aggiungi un elemento wrapper con .form-group, attorno a ciascun controllo del modulo, per garantire margini adeguati:
Esempio
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Modulo in linea Bootstrap
In una forma in linea, tutti gli elementi sono in linea e allineati a sinistra.
Nota: questo vale solo per i moduli all'interno di finestre di almeno 576 px di larghezza. Su schermi più piccoli di 576px, verrà impilato orizzontalmente.
Regola aggiuntiva per un modulo inline:
- Aggiungi classe
.form-inlineall'elemento<form>
L'esempio seguente crea un modulo in linea con due campi di input, una casella di controllo e un pulsante di invio:
Esempio
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
<div class="form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Modulo in linea con utilità
Il modulo inline sopra sembra "compresso" e apparirà molto meglio con le utilità di spaziatura di Bootstrap. L'esempio seguente aggiunge un margine destro ( .mr-sm-2) a ciascun input su tutti i dispositivi (piccoli e superiori). E una classe di margine inferiore ( .mb-2) viene utilizzata per definire lo stile del campo di input quando si interrompe (va da orizzontale a verticale a causa di spazio/larghezza insufficiente):
Esempio
<form class="form-inline" action="/action_page.php">
<label for="email"
class="mr-sm-2">Email address:</label>
<input type="email" class="form-control
mb-2 mr-sm-2" placeholder="Enter email" id="email">
<label for="pwd"
class="mr-sm-2">Password:</label>
<input type="password" class="form-control
mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary
mb-2">Submit</button>
</form>
Imparerai di più sulla spaziatura e altre classi "helper" nel nostro capitolo Bootstrap 4 Utilities .
Riga/Griglia del modulo
È inoltre possibile utilizzare le colonne ( .col) per controllare la larghezza e l'allineamento degli input dei moduli senza utilizzare le utilità di spaziatura. Ricordati solo di metterli all'interno di un .rowcontenitore.
Nell'esempio seguente, utilizziamo due colonne che appariranno una accanto all'altra. Imparerai molto di più su colonne e righe nel capitolo Bootstrap Grids .
Esempio
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Se vuoi margini di griglia inferiori (sovrascrivi le grondaie delle colonne predefinite), usa .form-rowinvece di .row:
Esempio
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Convalida del modulo
Puoi utilizzare diverse classi di convalida per fornire un feedback prezioso agli utenti. Aggiungi uno .was-validatedo .needs-validationl' <form>altro all'elemento, a seconda che desideri fornire un feedback di convalida prima o dopo l'invio del modulo. I campi di input avranno un bordo verde (valido) o rosso (non valido) per indicare cosa manca nel modulo. Puoi anche aggiungere un
messaggio .valid-feedbacko .invalid-feedbackper dire esplicitamente all'utente cosa manca o deve essere fatto prima di inviare il modulo.
Esempio
In questo esempio, utilizziamo .was-validatedper indicare cosa manca prima di inviare il modulo:
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
Esempio
In questo esempio, utilizziamo .needs-validation, che aggiungerà l'effetto di convalida DOPO l'invio del modulo (se manca qualcosa). Nota che dovrai anche aggiungere del codice jQuery affinché questo esempio funzioni correttamente:
<form action="/action_page.php" class="needs-validation"
novalidate>
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
<script>
//
Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the
forms we want to add validation styles to
var forms =
document.getElementsByClassName('needs-validation');
//
Loop over them and prevent submission
var validation =
Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
},
false);
});
}, false);
})();
</script>