Formulaires

Aperçu

Les formulaires Cauri reposent sur quelques classes simples : .form-label, .form-control, .form-select, .form-check et .form-text. Cette page présente les principes communs à tous les champs : libellé, aide, groupes, désactivé et lecture seule.

Un champ de formulaire Cauri se compose toujours de trois éléments : un libellé visible (<label> avec .form-label), le contrôle lui-même (.form-control, .form-select, .form-check-input…) et, si besoin, un texte d’aide (.form-text) relié au contrôle par aria-describedby.

Les contrôles occupent toute la largeur de leur conteneur. Pour les placer côte à côte, utilisez la grille de formulaire. Pour regrouper un préfixe, un suffixe ou un bouton avec un champ, voyez les groupes de champs.

Libellé, champ et aide#

Associez chaque libellé à son champ avec for et id. Le texte d’aide est relié au champ par aria-describedby : un lecteur d’écran le lit après le libellé.

<form>
  <div class="mb-3">
    <label for="apercu-nom" class="form-label">Nom complet du titulaire</label>
    <input type="text" class="form-control" id="apercu-nom" name="nom" autocomplete="name" aria-describedby="apercu-nom-aide">
    <div id="apercu-nom-aide" class="form-text">Saisissez le nom tel qu'il figure sur votre pièce d'identité.</div>
  </div>
  <div class="mb-3">
    <label for="apercu-email" class="form-label">Adresse e-mail</label>
    <input type="email" class="form-control" id="apercu-email" name="email" autocomplete="email" placeholder="prenom.nom@exemple.ci">
  </div>
  <button type="button" class="btn btn-primary">Continuer</button>
</form>

Champs désactivés et en lecture seule#

disabled grise le champ et l’exclut de l’envoi ; readonly garde l’apparence active mais interdit la modification, la valeur reste envoyée. Préférez readonly pour une donnée que le client doit pouvoir lire et copier, comme un IBAN.

<form>
  <div class="mb-3">
    <label for="apercu-agence" class="form-label">Agence de rattachement</label>
    <input type="text" class="form-control" id="apercu-agence" value="Abidjan Plateau" disabled>
  </div>
  <div class="mb-3">
    <label for="apercu-iban" class="form-label">IBAN du compte</label>
    <input type="text" class="form-control" id="apercu-iban" value="CI93 CI008 01111 101111111111 36" readonly>
  </div>
  <div class="mb-3">
    <label for="apercu-statut" class="form-label">Statut du dossier</label>
    <select class="form-select" id="apercu-statut" disabled>
      <option selected>En cours d'instruction</option>
    </select>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="apercu-cgu" checked disabled>
    <label class="form-check-label" for="apercu-cgu">Conditions générales acceptées le 12 mars</label>
  </div>
</form>

Regrouper des champs liés#

Entourez un ensemble de champs apparentés (boutons radio, cases) d’un <fieldset> et nommez-le avec <legend>. Un lecteur d’écran annonce la légende avant chaque option.

<form>
  <fieldset class="mb-3">
    <legend class="fs-6 fw-semibold">Fréquence des relevés de compte</legend>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="apercu-releve" id="apercu-releve-mensuel" checked>
      <label class="form-check-label" for="apercu-releve-mensuel">Chaque mois</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="apercu-releve" id="apercu-releve-trimestre">
      <label class="form-check-label" for="apercu-releve-trimestre">Chaque trimestre</label>
    </div>
  </fieldset>
  <fieldset disabled>
    <legend class="fs-6 fw-semibold">Options réservées aux comptes professionnels</legend>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="apercu-multi">
      <label class="form-check-label" for="apercu-multi">Activer la double signature</label>
    </div>
  </fieldset>
</form>

Classes de base

Classes de base
Classe	Élément	Rôle
`.form-label`	`<label>`	Libellé au-dessus du champ, avec une marge basse.
`.form-control`	`<input>`, `<textarea>`	Champ de saisie pleine largeur.
`.form-select`	`<select>`	Liste déroulante native.
`.form-check`	`<div>`	Conteneur d’une case, d’un bouton radio ou d’un interrupteur.
`.form-text`	`<div>`, `<small>`	Texte d’aide discret sous le champ.
`.form-range`	`<input type="range">`	Curseur de plage.
`.form-floating`	`<div>`	Conteneur d’un libellé flottant.
`.input-group`	`<div>`	Regroupe un champ avec des préfixes, suffixes ou boutons.

Bonnes pratiques

À faire

Affichez un libellé visible pour chaque champ et gardez-le en permanence au-dessus de la saisie.
Renseignez l’attribut autocomplete adapté (name, email, tel, cc-number…) pour que le navigateur remplisse le formulaire.
Indiquez dans le texte d’aide le format attendu et les contraintes (longueur, caractères autorisés).
Utilisez le bon type (email, tel, number, date) pour obtenir le clavier et le contrôle appropriés sur mobile.

À éviter

N’utilisez pas le placeholder à la place d’un libellé : il disparaît à la saisie et son contraste est faible.
Ne désactivez pas un champ sans expliquer pourquoi ; une donnée à consulter se met en readonly.
Ne mélangez pas plusieurs questions dans un même libellé.

Accessibilité

Reliez chaque libellé à son champ par for et id : l’identifiant doit être unique dans la page.
Reliez l’aide et les messages d’erreur au champ avec aria-describedby.
Regroupez les cases et les boutons radio dans un <fieldset> avec une <legend>.
Ne signalez jamais un état (obligatoire, erreur) par la couleur seule : ajoutez un texte ou une icône.