Bootstrap5 Étiquettes flottantes de formulaire
Par défaut, le contenu du libellé est généralement affiché au-dessus du champ de saisie :
Exemple Bootstrap
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" id="email" placeholder="Entrez l'e-mail" name="email">
<label for="email">E-mail</label>
</div>
<div class="form-floating mt-3 mb-3">
<input type="text" class="form-control" id="pwd" placeholder="Entrez le mot de passe" name="pswd">
<label for="pwd">Mot de passe</label>
</div>
Essayez-le vous-même »
Remarques :L'élément <label> doit venir après l'élément <input>, et chaque élément <input> nécessite un attribut placeholder.
Champ de texte
Les zones de texte peuvent également avoir l'effet flottant :
Exemple Bootstrap
<div class="form-floating">
<textarea class="form-control" id="comment" name="text" placeholder="Votre commentaire ici"></textarea>
<label for="comment">Commentaires</label>
</div>
Essayez-le vous-même »
Liste déroulante
Les étiquettes flottantes peuvent être utilisées sur les menus de sélection. Elles apparaissent toujours dans le coin supérieur gauche du menu de sélection, sans effet de flottement au clic :
Exemple Bootstrap
<div class="form-floating">
<select class="form-select" id="sel1" name="sellist">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<label for="sel1" class="form-label">Liste de sélection (sélectionnez-en une) :</label>
</div>
Essayez-le vous-même »