Bootstrap4 Formulaires
Dans ce chapitre, nous allons apprendre à créer des formulaires à l'aide de Bootstrap. Bootstrap peut créer des formulaires de différents styles avec quelques balises HTML simples et des classes étendues.
Éléments de formulaire<input>, <textarea>, et<select>éléments
Lors de l'utilisation.form-controldans le cas de la classe, la largeur est définie à 100%.
Dispositions de formulaire Bootstrap4
- Formulaire empilé (pleine largeur d'écran) : direction verticale
- Formulaire en ligne : direction horizontale
Bootstrap propose deux types de dispositions de formulaire :
Formulaire empilé
L'exemple suivant utilise deux champs de saisie, une case à cocher et un bouton d'envoi pour créer un formulaire empilé :
Exemple
<form action="">
<div class="form-group">
<label for="email">Adresse e-mail :</label>
<input type="email" class="form-control" placeholder="Saisissez l'adresse e-mail" id="email">
</div>
<div class="form-group">
<label for="pwd">Mot de passe :</label>
<input type="password" class="form-control" placeholder="Saisissez le mot de passe" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Se souvenir de moi
</label>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
Essayez-le vous-même »
Effet d'affichage :
Formulaire en ligne
Tous les éléments d'un formulaire en ligne sont alignés à gauche.
Remarque : lorsque la largeur de l'écran est inférieure à 576px, il est empilé verticalement ; si la largeur de l'écran est supérieure ou égale à 576px, les éléments du formulaire seront affichés sur la même ligne horizontale.
Les formulaires en ligne doivent ajouter<form>à l'élément.form-inlineclasse.
L'exemple suivant utilise deux champs de saisie, une case à cocher et un bouton de soumission pour créer un formulaire en ligne :
Exemple
<form class="form-inline">
<label for="email">Adresse e-mail :</label>
<input type="email" class="form-control" id="email">
<label for="pwd">Mot de passe :</label>
<input type="password" class="form-control" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Se souvenir de moi
</label>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
Essayez-le vous-même »
Effet d'affichage :
La disposition des éléments dans l'exemple ci-dessus semble très compacte ; vous pouvez utiliser.mr-sm-2classe pour définir la marge droite, utiliser.mb-2classe pour définir la marge inférieure :
Exemple
<form class="form-inline" action="">
<label for="email" class="mr-sm-2">Adresse e-mail :</label>
<input type="email" class="form-control mb-2 mr-sm-2" placeholder="Saisissez l'e-mail" id="email">
<label for="pwd" class="mr-sm-2">Mot de passe :</label>
<input type="password" class="form-control mb-2 mr-sm-2" placeholder="Saisissez le mot de passe" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Se souvenir de moi
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Envoyer</button>
</form>
Essayez-le vous-même »
Effet d'affichage :
Ligne/Grille de formulaire
Nous pouvons également utiliser la.colclasse pour contrôler la largeur et l'alignement des éléments de formulaire ; il n'est pas nécessaire d'utiliser des classes d'espacement..colLes formulaires contrôlés par la classe doivent être placés dans un.rowcontainer.
L'exemple suivant affiche deux colonnes côte à côte :
Exemple
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Entrez l'e-mail" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Entrez le mot de passe" name="pswd">
</div>
</div>
</form>
Essayez-le vous-même »
Effet d'affichage :
Si la grille doit utiliser un espacement plus petit, vous pouvez utiliser .form-row au lieu de .row :
Exemple
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Entrez l'e-mail" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Entrez le mot de passe" name="pswd">
</div>
</div>
</form>
Essayez-le vous-même »
Validation de formulaire
Nous pouvons utiliser différentes classes de validation pour définir la fonctionnalité de validation des formulaires.
.was-validatedou.needs-validationAjoutez-le à l'élément <form>, et les champs de saisie auront un effet de bordure verte (valide) ou rouge (invalide), servant à indiquer si le formulaire nécessite une saisie.
.valid-feedbackou.invalid-feedbackLa classe est utilisée pour indiquer aux utilisateurs quelles informations manquent, ou ce qui doit être complété avant de soumettre le formulaire.
Exemple
Utilisez la classe .was-validated pour afficher le contenu qui doit être rempli avant l'envoi du formulaire :
<form action="" class="was-validated">
<div class="form-group">
<label for="uname">Nom d'utilisateur :</label>
<input type="text" class="form-control" id="uname" placeholder="Saisissez le nom d'utilisateur" name="uname" required>
<div class="valid-feedback">Validation réussie !</div>
<div class="invalid-feedback">Veuillez saisir un nom d'utilisateur !</div>
</div>
<div class="form-group">
<label for="pwd">Mot de passe :</label>
<input type="password" class="form-control" id="pwd" placeholder="Saisissez le mot de passe" name="pswd" required>
<div class="valid-feedback">Validation réussie !</div>
<div class="invalid-feedback">Veuillez saisir un mot de passe !</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required>Accepter les conditions<div class="valid-feedback">Validation réussie !</div>
<div class="invalid-feedback">Vous devez accepter les conditions avant de soumettre.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</forme>
Essayez-le vous-même »
Exemple
Utilisez .needs-validation ; cela validera le contenu manquant après l'envoi du formulaire. Vous devez ajouter du code JavaScript pour que le code fonctionne correctement :
<form action="" class="needs-validation" novalidate>
<div class="form-group">
<label for="uname">Nom d'utilisateur :</label>
<input type="text" class="form-control" id="uname" placeholder="Entrez le nom d'utilisateur" name="uname" required>
<div class="valid-feedback">Validation réussie !</div>
<div class="invalid-feedback">Veuillez saisir un nom d'utilisateur !</div>
</div>
<div class="form-group">
<label for="pwd">Mot de passe :</label>
<input type="password" class="form-control" id="pwd" placeholder="Saisissez le mot de passe" name="pswd" required>
<div class="valid-feedback">Validation réussie !</div>
<div class="invalid-feedback">Veuillez saisir un mot de passe !</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required>Accepter les conditions<div class="valid-feedback">Validation réussie !</div>
<div class="invalid-feedback">Vous devez accepter les conditions avant de soumettre.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
<script>// Empêcher l'envoi du formulaire si la validation échoue
(function() {
'use strict';
window.addEventListener('load', function() {
// Obtenir les styles de validation du formulaire
var forms = document.getElementsByClassName('needs-validation');
// Parcourir et empêcher l'envoi
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>
Essayez-le vous-même » Autres extensions