6.3 — Input group & floating labels

⏱️ TL;DR — Un input group (.input-group) accole un préfixe/suffixe (.input-group-text), un bouton ou un select à un champ. Un floating label (.form-floating) fait « flotter » le label à l’intérieur du champ quand il est rempli — un rendu moderne, sans JS.

🎯 Objectifs

Ajouter préfixes, suffixes et boutons aux champs.
Créer des labels flottants.

Input group


<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="pseudo">
</div>
 
<div class="input-group">
  <input type="text" class="form-control" placeholder="Montant">
  <span class="input-group-text">€</span>
</div>
 
<div class="input-group">
  <span class="input-group-text">https://</span>
  <input type="text" class="form-control">
  <span class="input-group-text">.com</span>
</div>

Avec un bouton (barre de recherche) :


<div class="input-group">
  <input type="search" class="form-control" placeholder="Rechercher">
  <button class="btn btn-primary" type="button">Chercher</button>
</div>

Avec un select ou une case :


<div class="input-group">
  <select class="form-select">…</select>
  <input type="text" class="form-control">
</div>

Tailles : input-group-sm, input-group-lg.

Floating labels


<div class="form-floating mb-3">
  <input type="email" class="form-control" id="fEmail" placeholder="nom@exemple.fr">
  <label for="fEmail">Adresse e-mail</label>
</div>
 
<div class="form-floating">
  <textarea class="form-control" id="fMsg" style="height: 100px" placeholder="Message"></textarea>
  <label for="fMsg">Message</label>
</div>

Règles : le champ doit avoir un placeholder (même vide) et le <label> doit venir après le champ dans le HTML.

Floating + select :


<div class="form-floating">
  <select class="form-select" id="fSel"><option>…</option></select>
  <label for="fSel">Choix</label>
</div>

⚠️ Piège — Un floating label sans placeholder sur le champ ne « flotte » pas correctement : le placeholder (même " ") est requis par le mécanisme CSS. Et l’ordre HTML est input puis label.

💡 Pour un dev React — Les floating labels sont 100 % CSS : aucun état à gérer. Parfait pour des formulaires compacts. Attention en JSX : htmlFor sur le label, id correspondant sur le champ.

✏️ Exercices

Un champ prix avec « € » collé à droite.

✅ Solution


<div class="input-group">
  <input type="number" class="form-control">
  <span class="input-group-text">€</span>
</div>

Un champ e-mail avec floating label.

✅ Solution


<div class="form-floating">
  <input type="email" class="form-control" id="e" placeholder="e">
  <label for="e">E-mail</label>
</div>

🧠 Quiz de révision

1. Quelle classe pour accoler un préfixe à un champ ?

input-group (+ input-group-text).

2. Quelle classe pour un label flottant ?

form-floating.

3. Que faut-il impérativement sur le champ d’un floating label ?

Un placeholder (même vide).

4. Dans quel ordre HTML placer champ et label pour le floating ?

Le champ d’abord, le label après.

5. Comment agrandir un input group ?

input-group-lg.

Chapitre suivant : 6.4 — Disposition des formulaires