Bootstrap4 Groupe de saisie
Nous pouvons utiliser.input-groupclasse pour ajouter plus de styles aux champs de saisie de formulaire, tels que des icônes, du texte ou des boutons.
Utilisez la classe.input-group-prependpour ajouter des informations textuelles devant le champ de saisie, la classe.input-group-appendest ajoutée après le champ de saisie.
Enfin, nous devons également utiliser la classe.input-group-textpour définir le style du texte.
Exemple Bootstrap4
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Nom d'utilisateur">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Votre e-mail">
<div class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>
</form>
Essayez-le vous-même »
Taille du champ de saisie
Utilisez.input-group-smclasse pour définir un petit champ de saisie,.input-group-lgclasse définit un grand champ de saisie:
Exemple Bootstrap4
<form>
<div class="input-group mb-3 input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">Petit</span>
</div>
<input type="text" class="form-control">
</div>
</form>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Par défaut</span>
</div>
<input type="text" class="form-control">
</div>
</form>
<form>
<div class="input-group mb-3 input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">Grand</span>
</div>
<input type="text" class="form-control">
</div>
</forme>
Essayez-le vous-même »
Plusieurs champs de saisie et texte
Exemple Bootstrap4
<!--Plusieurs champs de saisie-->
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Personne</span>
</div>
<input type="text" class="form-control" placeholder="Prénom">
<input type="text" class="form-control" placeholder="Nom">
</div>
</form>
<!--Texte multiple-->
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Un</span>
<span class="input-group-text">Deux</span>
<span class="input-group-text">Trois</span>
</div>
<input type="text" class="form-control">
</div>
</form>
Essayez-le vous-même »
Cases à cocher et boutons radio
Le texte peut être remplacé par des cases à cocher et des boutons radio :
Exemple Bootstrap4
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox">
</div>
</div>
<input type="text" class="form-control" placeholder="EXEMPLE">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio">
</div>
</div>
<input type="text" class="form-control" placeholder="GOOGLE">
</div>
Essayez-le vous-même »
Ajouter un groupe de boutons à un champ de saisie
Exemple Bootstrap4
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Bouton de base</button>
</div>
<input type="text" class="form-control" placeholder="Du texte">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Rechercher">
<div class="input-group-append">
<button class="btn btn-success" type="submit">Aller</button>
</div>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Quelque chose d'astucieux..">
<div class="input-group-append">
<button class="btn btn-primary" type="button">OK</button>
<button class="btn btn-danger" type="button">Annuler</button>
</div>
</div>
Essayez-le vous-même »
Menu déroulant
L'ajout d'un menu déroulant à la zone de saisie ne nécessite pas l'utilisation de la classe .dropdown.
Exemple Bootstrap4
<div class="input-group mt-3 mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">Sélectionner un site Web</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://www.google.com">GOOGLE</a>
<a class="dropdown-item" href="https://www.example.com">EXEMPLE</a>
<a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a>
</div>
</div>
<input type="text" class="form-control" placeholder="Adresse du site Web">
</div>
Essayez-le vous-même »
Étiquette de groupe de saisie
Dans les groupes de saisie, définissez les étiquettes en plaçant un élément label en dehors du groupe de saisie. L'attribut for de l'étiquette doit correspondre à l'id du groupe de saisie. Cliquer sur l'étiquette peut donner le focus au champ de saisie :
Exemple Bootstrap4
<label for="demo">Écrivez votre e-mail ici :</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="E-mail" id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>
Essayez-le vous-même »