Bootstrap - Label Flottant: Un Guide Complet Pour Les Débutants

Salut à toi, futur(e) développeur(-euse) web ! Aujourd'hui, nous allons plonger dans le monde merveilleux des Label Flottants de Bootstrap. En tant que votre enseignant(-e) informatique du coin, je suis excité(e) 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(e) pro des labels flottants !

Qu'est-ce que les Label Flottants ?

Avant de commencer, comprenstons ce qu'est un label flottant. Imaginez que vous remplissez un formulaire, et que l'étiquette de chaque champ de saisie flotte magiquement au-dessus du champ lorsque vous commencez à taper. Voilà l'essence des labels flottants ! Ils offrent une interface utilisateur propre et intuitive qui économise de l'espace et a aussi l'air plutôt cool.

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 ? Decomposons-le :

1. Nous enveloppons notre champ de saisie et notre étiquette dans un div avec la classe form-floating.
2. Le input est placé avant le label ( 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 vous concentrez sur le champ de saisie ou commencez à taper, l'étiquette flottera gracieusement au-dessus du champ. C'est comme par magie, mais c'est juste du CSS ingénieux !

Textareas

Les labels flottants ne sont pas seulement pour les champs de saisie simples. Ils fonctionnent également très bien avec les textareas :

<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 a aussi ça :

<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Exemple de sélecteur à label flottant">
<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é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>

Il suffit d'ajouter 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 des étiquettes flottantes.

Groupes de champs

Les labels flottants peuvent également être utilisés avec des 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 à label flottant.

Mise en page

Enfin, voyons comment nous pouvons organiser ces champs de saisie à label flottant dans une grille responsive :

<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 différents aspects des labels flottants, 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">Feedback</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 labels flottants, organisés dans une mise en page de grille responsive.

Conclusion

Et voilà, les amis ! Nous avons couvert les inside et les outside des labels flottants de Bootstrap. De l'entrée 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.

N'oubliez pas, la pratique rend parfait. Essayez de manipuler ces exemples, mélangez et assortissez 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 que vos étiquettes flottent toujours gracieusement !

Méthode	Description
Exemple de Base	Utilise la classe form-floating avec un champ de saisie et une étiquette
Textareas	Applique des labels flottants aux éléments textarea
Sélecteurs	Met en œuvre des labels flottants pour les menus déroulants
Désactivé	Montre comment styliser les champs de saisie désactivés avec des labels flottants
Texte en lecture seule	Démontre les champs non modifiables avec des labels flottants
Groupes de champs	Combine les groupes de champs avec des labels flottants
Mise en page	Organise les champs de saisie à label flottant dans des mises en page de grilles responsives

Credits: Image by storyset