Bootstrap - Étiquettes Flottantes : Un Guide Complet pour les Débutants

Salut à toi, futur(e) développeur(-euse) web ! Aujourd'hui, nous allons plonger dans le merveilleux monde des étiquettes flottantes de Bootstrap. En tant que votre professeur d'informatique du coin, je suis excité de vous guider dans cette aventure. Ne vous inquiétez pas si vous êtes nouveau(-elle) en programmation - nous allons avancer pas à pas, et avant que vous ne vous en rendiez compte, vous serez un pro des étiquettes flottantes !

Qu'est-ce que les Étiquettes Flottantes ?

Avant de commencer, comprenons ce qu'elles sont. Imaginez que vous remplissez un formulaire, et que l'étiquette de chaque champ s'envole magiquement au-dessus du champ lorsque vous commencez à taper. Voilà l'essence des étiquettes flottantes ! Elles offrent une interface utilisateur propre et intuitive qui économise de l'espace et a l'air plutôt cool aussi.

Exemple de Base

Commençons par un exemple de base pour nous familiariser :

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Adresse e-mail</label>
</div>

Que se passe-t-il ici ? Décomposons cela :

1. Nous enveloppons notre champ de saisie et notre étiquette dans un div avec la classe form-floating.
2. Le input précède l'étiquette ( cet ordre est important !).
3. Nous ajoutons un placeholder au champ de saisie, que Bootstrap utilisera pour déterminer la taille de l'étiquette.

Lorsque vous focalisez sur le champ ou commencez à taper, l'étiquette va gracieusement flotter au-dessus du champ. C'est comme par magie, mais c'est juste du CSS ingénieux !

Textareas

Les étiquettes flottantes ne sont pas seulement pour les champs de saisie simples. Elles fonctionnent très bien avec les textareas aussi :

<div class="form-floating">
<textarea class="form-control" placeholder="Laissez un commentaire ici" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Commentaires</label>
</div>

Ce fonctionne comme notre exemple de base, mais avec un textarea au lieu d'un input. Parfait pour lorsque vous avez besoin que les utilisateurs saisissent un texte plus long !

Sélecteurs

Que faire avec les menus déroulants ? Bootstrap vous couvre :

<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Exemple de sélecteur à étiquette flottante">
<option selected>Ouvrez ce menu déroulant</option>
<option value="1">Un</option>
<option value="2">Deux</option>
<option value="3">Trois</option>
</select>
<label for="floatingSelect">Fonctionne avec les sélecteurs</label>
</div>

L'étiquette flottante apparaîtra lorsque vous sélectionnez une option. C'est une excellente manière de rendre vos formulaires cohérents sur différents types de champs d'entrée.

Désactivé

Parfois, vous pourriez avoir besoin de désactiver un champ de saisie. Voici comment vous pouvez le faire tout en conservant l'étiquette flottante :

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInputDisabled" placeholder="[email protected]" disabled>
<label for="floatingInputDisabled">Adresse e-mail (désactivé)</label>
</div>

Ajoutez simplement l'attribut disabled à votre champ de saisie, et Bootstrap le stylisera en conséquence.

Texte en Lecture Seule

Que faire si vous souhaitez afficher des informations qui ne peuvent pas être modifiées ? Entrez le texte en lecture seule :

<div class="form-floating mb-3">
<input type="email" class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]" readonly>
<label for="floatingEmptyPlaintextInput">Champ vide</label>
</div>

Cela crée un champ non modifiable qui bénéficie toujours du style d'étiquette flottante.

Groupes de Champs

Les étiquettes flottantes peuvent également être utilisées avec les groupes de champs pour des mises en page de formulaires plus complexes :

<div class="input-group mb-3">
<span class="input-group-text">$</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="Nom d'utilisateur">
<label for="floatingInputGroup1">Montant</label>
</div>
</div>

Cet exemple combine un groupe de champs (le préfixe du signe dollar) avec un champ de saisie à étiquette flottante.

Mise en Page

Enfin, voyons comment nous pouvons organiser ces champs de saisie à étiquette flottante dans une grille réactive :

<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]">
<label for="floatingInputGrid">Adresse e-mail</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>Ouvrez ce menu déroulant</option>
<option value="1">Un</option>
<option value="2">Deux</option>
<option value="3">Trois</option>
</select>
<label for="floatingSelectGrid">Fonctionne avec les sélecteurs</label>
</div>
</div>
</div>

Cela crée une mise en page en deux colonnes qui s'empile verticalement sur les écrans plus petits.

Mettre Tout Ensemble

Maintenant que nous avons couvert tous ces aspects différents des étiquettes flottantes, créons un petit formulaire qui rassemble tout :

<form class="container mt-5">
<h2>Contactez-nous</h2>
<div class="row g-3">
<div class="col-md-6">
<div class="form-floating">
<input type="text" class="form-control" id="floatingName" placeholder="John Doe">
<label for="floatingName">Nom Complet</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating">
<input type="email" class="form-control" id="floatingEmail" placeholder="[email protected]">
<label for="floatingEmail">Adresse e-mail</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<select class="form-select" id="floatingSelect">
<option selected>Choisissez un sujet</option>
<option value="1">Requête Générale</option>
<option value="2">Support Technique</option>
<option value="3">Retour</option>
</select>
<label for="floatingSelect">Sujet</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<textarea class="form-control" placeholder="Laissez un commentaire ici" id="floatingTextarea" style="height: 100px"></textarea>
<label for="floatingTextarea">Commentaires</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Soumettre</button>
</div>
</div>
</form>

Ce formulaire combine tous les éléments que nous avons discutés : champs de saisie, sélecteurs et textareas, tous avec des étiquettes flottantes, arrangés dans une mise en page de grille réactive.

Conclusion

Et voilà, les amis ! Nous avons couvert les tenants et les aboutissants des étiquettes flottantes de Bootstrap. De los champs de saisie de base aux mises en page complexes, vous avez maintenant les outils pour créer des formulaires élégants et conviviaux qui impressionneront vos utilisateurs et feront ressortir vos sites web.

Souvenez-vous, la pratique rend parfait. Essayez d'expérimenter avec ces exemples, mélangez et assortez différents éléments, et voyez ce que vous pouvez créer. Avant que vous ne vous en rendiez compte, vous flotterez des étiquettes comme un développeur web chevronné !

Bonne programmation, et puissent vos étiquettes toujours flotter gracieusement !

Credits: Image by storyset