Bootstrap 4 formulaires
Paramètres par défaut de Bootstrap 4
Les contrôles de formulaire reçoivent automatiquement un style global avec Bootstrap :
Tous les éléments textuels <input>, <textarea>et
<select>de classe .form-controlont une largeur de 100 %.
Mises en page de formulaire Bootstrap 4
Bootstrap fournit deux types de mises en page de formulaire :
- Formulaire empilé (pleine largeur)
- Formulaire en ligne
Formulaire empilé Bootstrap 4
L'exemple suivant crée un formulaire empilé avec deux champs de saisie, une case à cocher et un bouton d'envoi.
Ajoutez un élément wrapper avec .form-group, autour de chaque contrôle de formulaire, pour garantir des marges appropriées :
Exemple
<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>
Formulaire en ligne Bootstrap
Dans un formulaire en ligne, tous les éléments sont en ligne et alignés à gauche.
Remarque : Cela ne s'applique qu'aux formulaires dans les fenêtres d'au moins 576 pixels de large. Sur les écrans inférieurs à 576 pixels, il s'empilera horizontalement.
Règle supplémentaire pour un formulaire en ligne :
- Ajouter une classe
.form-inlineà l'<form>élément
L'exemple suivant crée un formulaire en ligne avec deux champs de saisie, une case à cocher et un bouton d'envoi :
Exemple
<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>
Formulaire en ligne avec utilitaires
Le formulaire en ligne ci-dessus semble "compressé" et aura une bien meilleure apparence avec les utilitaires d'espacement de Bootstrap. L'exemple suivant ajoute une marge droite ( .mr-sm-2) à chaque entrée sur tous les appareils (petits et plus). Et une classe inférieure de marge ( .mb-2) est utilisée pour styliser le champ de saisie lorsqu'il se casse (passe de l'horizontal à la verticale en raison d'un espace/largeur insuffisant):
Exemple
<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>
Vous en apprendrez plus sur l'espacement et les autres classes "assistantes" dans notre chapitre Bootstrap 4 Utilities .
Formulaire Ligne/Grille
Vous pouvez également utiliser des colonnes ( .col) pour contrôler la largeur et l'alignement des entrées de formulaire sans utiliser d'utilitaires d'espacement. N'oubliez pas de les mettre dans un .rowrécipient.
Dans l'exemple ci-dessous, nous utilisons deux colonnes qui apparaîtront côte à côte. Vous en apprendrez beaucoup plus sur les colonnes et les lignes dans le chapitre Bootstrap Grids .
Exemple
<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>
Si vous voulez moins de marges de grille (remplacer les gouttières de colonne par défaut), utilisez à la .form-rowplace de.row :
Exemple
<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>
Validation du formulaire
Vous pouvez utiliser différentes classes de validation pour fournir des commentaires précieux aux utilisateurs. Ajoutez soit .was-validatedou .needs-validationà l' <form>élément, selon que vous souhaitez fournir des commentaires de validation avant ou après la soumission du formulaire. Les champs de saisie auront une bordure verte (valide) ou rouge (invalide) pour indiquer ce qui manque dans le formulaire. Vous pouvez également ajouter un
message .valid-feedbackou .invalid-feedbackpour indiquer explicitement à l'utilisateur ce qui manque ou ce qui doit être fait avant de soumettre le formulaire.
Exemple
Dans cet exemple, nous utilisons .was-validatedpour indiquer ce qui manque avant de soumettre le formulaire :
<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>
Exemple
Dans cet exemple, nous utilisons .needs-validation, qui ajoutera l'effet de validation APRÈS la soumission du formulaire (s'il manque quelque chose). Notez que vous devrez également ajouter du code jQuery pour que cet exemple fonctionne correctement :
<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>