Bootstrap 5 Groupe de saisie
Nous pouvons utiliser.input-groupen tant que classe pour ajouter plus de styles aux champs de saisie de formulaire, tels que des icônes, du texte ou des boutons.
.input-group-textclasse pour définir le style du texte.
Exemple Bootstrap
<form>
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Nom d'utilisateur">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Votre e-mail">
<span class="input-group-text">@example.com</span>
</div>
</form>
Essayez-le vous-même »
Taille du groupe de saisie
Utilisez.input-group-smla classe pour définir un petit groupe de saisie,.input-group-lgla classe pour définir un grand groupe de saisie :
Exemple Bootstrap
<div class="input-group mb-3 input-group-sm">
<span class="input-group-text">Petit</span>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<span class="input-group-text">Par défaut</span>
<input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
<span class="input-group-text">Grand</span>
<input type="text" class="form-control">
</div>
Essayez-le vous-même »
Plusieurs champs de saisie et texte
Exemple Bootstrap
<!--Plusieurs champs de saisie-->
<div class="input-group mb-3">
<span class="input-group-text">Personne</span>
<input type="text" class="form-control" placeholder="Prénom">
<input type="text" class="form-control" placeholder="Nom">
</div>
<!--Plusieurs compléments de texte-->
<div class="input-group mb-3">
<span class="input-group-text">Un</span>
<span class="input-group-text">Deux</span>
<span class="input-group-text">Trois</span>
<input type="text" class="form-control">
</div>
Essayez-le vous-même »
Cases à cocher et boutons radio
Les informations textuelles peuvent être remplacées par des cases à cocher et des boutons radio :
Exemple Bootstrap
<div class="input-group mb-3">
<div class="input-group-text">
<input type="checkbox">
</div>
<input type="text" class="form-control" placeholder="EXEMPLE">
</div>
<div class="input-group mb-3">
<div class="input-group-text">
<input type="radio">
</div>
<input type="text" class="form-control" placeholder="GOOGLE">
</div>
Essayez-le vous-même »
Ajouter des groupes de boutons aux groupes de saisie
Exemple Bootstrap
<div class="input-group mb-3">
<button class="btn btn-outline-primary" type="button">Bouton de base</button>
<input type="text" class="form-control" placeholder="Du texte">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Rechercher">
<button class="btn btn-success" type="submit">Aller</button>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Quelque chose d'astucieux..">
<button class="btn btn-primary" type="button">OK</button>
<button class="btn btn-danger" type="button">Annuler</button>
</div>
Essayez-le vous-même »
Menus déroulants
L'ajout d'un menu déroulant à un groupe de champs ne nécessite pas l'utilisation de la classe .dropdown.
Exemple Bootstrap
<div class="input-group mt-3 mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sélectionner un site Web</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="https://www.google.com">GOOGLE</a></li>
<li><a class="dropdown-item" href="https://www.example.com">EXEMPLE</a></li>
<li><a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a></li>
</ul>
<input type="text" class="form-control" placeholder="Adresse du site Web">
</div>
Essayez-le vous-même »
Étiquettes de groupe de saisie
Dans un groupe de saisie, vous pouvez définir une étiquette en plaçant une étiquette en dehors du groupe de saisie. L'attribut for de l'étiquette doit correspondre à l'id du groupe de saisie. Cliquer sur l'étiquette mettra le focus sur le champ de saisie :
Exemple Bootstrap
<form>
<label for="demo">Saisissez votre e-mail ici :</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="E-mail" id="demo" name="email">
<span class="input-group-text">@example.com</span>
</div>
</forme>
Essayez-le vous-même »