Formulaires

Libellés flottants

.form-floating place le libellé dans le champ ; il remonte en petit au-dessus de la saisie dès que le champ reçoit le focus ou une valeur. Ce gabarit économise de la hauteur tout en gardant un libellé visible.

Placez l'input avant le <label> dans .form-floating, et renseignez toujours un placeholder : Cauri s’en sert pour détecter si le champ est vide (:placeholder-shown). La valeur peut être un simple espace ou un exemple, le libellé flottant reste le vrai libellé.

Champs de texte#

Adresse e-mail

Mot de passe

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="flottant-email" placeholder="aya.kouassi@exemple.ci" autocomplete="email">
  <label for="flottant-email">Adresse e-mail</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="flottant-mdp" placeholder="Mot de passe" autocomplete="current-password">
  <label for="flottant-mdp">Mot de passe</label>
</div>

Valeur préremplie#

Quand le champ contient déjà une valeur, le libellé s’affiche directement en position haute.

Nom du titulaire

<div class="form-floating">
  <input type="text" class="form-control" id="flottant-titulaire" placeholder="Nom du titulaire" value="Aya Kouassi" autocomplete="name">
  <label for="flottant-titulaire">Nom du titulaire</label>
</div>

Zone de texte#

Pour un <textarea>, réglez la hauteur avec style="height" : l’attribut rows ne s’applique pas à un champ flottant.

Motif de la demande

<div class="form-floating">
  <textarea class="form-control" placeholder="Motif de la demande" id="flottant-motif" style="height: 120px"></textarea>
  <label for="flottant-motif">Motif de la demande</label>
</div>

Sélecteur#

Un .form-select fonctionne aussi dans .form-floating : le libellé reste toujours en position haute, car une option est toujours sélectionnée. N’ajoutez pas d’attribut placeholder.

Agence de retrait de la carte

<div class="form-floating">
  <select class="form-select" id="flottant-agence" aria-label="Agence de retrait de la carte">
    <option selected>Abidjan Plateau</option>
    <option value="1">Abidjan Cocody</option>
    <option value="2">Bouaké</option>
    <option value="3">San-Pédro</option>
  </select>
  <label for="flottant-agence">Agence de retrait de la carte</label>
</div>

Lecture seule et désactivé#

.form-control-plaintext fonctionne avec les libellés flottants pour afficher une valeur en texte. Un champ disabled s’affiche grisé avec son libellé.

Solde disponible

Devise du compte

<div class="form-floating mb-3">
  <input type="text" readonly class="form-control-plaintext" id="flottant-solde" placeholder="Solde" value="1 250 000 FCFA">
  <label for="flottant-solde">Solde disponible</label>
</div>
<div class="form-floating">
  <input type="text" class="form-control" id="flottant-devise" placeholder="Devise" value="Franc CFA (XOF)" disabled>
  <label for="flottant-devise">Devise du compte</label>
</div>

Dans un groupe de champs#

.form-floating se place dans un .input-group, avec un texte ou un bouton à côté. Le texte d’accompagnement ne doit pas remplacer le libellé.

FCFA

Montant du virement

<div class="input-group">
  <span class="input-group-text">FCFA</span>
  <div class="form-floating">
    <input type="text" class="form-control" id="flottant-montant" placeholder="Montant" inputmode="numeric">
    <label for="flottant-montant">Montant du virement</label>
  </div>
</div>

Dans la grille#

Placez chaque .form-floating dans une colonne de la grille pour aligner plusieurs champs.

Prénom

Nom

<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="text" class="form-control" id="flottant-prenom" placeholder="Prénom" autocomplete="given-name">
      <label for="flottant-prenom">Prénom</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <input type="text" class="form-control" id="flottant-nom" placeholder="Nom" autocomplete="family-name">
      <label for="flottant-nom">Nom</label>
    </div>
  </div>
</div>

Règles du libellé flottant

Règles du libellé flottant
Règle	Pourquoi
`input` avant `label`	Le style repose sur le sélecteur voisin `input ~ label`.
`placeholder` obligatoire sur les `input` et `textarea`	Sert à détecter le champ vide ; sans lui, le libellé ne remonte pas.
Pas de `placeholder` sur `select`	Le libellé est toujours en haut, car une option est toujours choisie.
Hauteur par `style="height"` pour `textarea`	`rows` est ignoré dans un champ flottant.
`.form-control-plaintext`	Fonctionne avec le libellé flottant pour une valeur en lecture seule.
Pas de `.form-control-sm` ou `.form-control-lg`	La hauteur du champ flottant est fixe ; ces tailles ne s’appliquent pas.

Bonnes pratiques

À faire

Gardez des libellés courts : ils sont réduits quand le champ est rempli.
Placez toujours l'input avant le label et ajoutez un placeholder.
Utilisez les libellés flottants dans un formulaire compact (connexion, recherche, saisie rapide).
Pour un formulaire long ou complexe, préférez des libellés classiques au-dessus des champs.

À éviter

Ne mettez pas un libellé trop long : il est tronqué dans le champ.
N’utilisez pas le placeholder pour donner une consigne importante : le libellé flottant le recouvre.
Ne combinez pas .form-floating avec une aide qui ne se relie pas au champ par aria-describedby.

Accessibilité

Le <label> reste le vrai libellé et doit avoir for relié à l'id du champ.
Un placeholder qui répète le libellé est inutile pour un lecteur d’écran : mettez un exemple de format ou un espace.
Vérifiez le contraste du libellé réduit dans les états focus, rempli et désactivé.
Reliez les textes d’aide et d’erreur au champ avec aria-describedby.