Formulaires

Mise en page

Les formulaires se mettent en page avec la grille et les utilitaires de Cauri. Cette page montre les formulaires empilés, en colonnes, horizontaux et en ligne, ainsi que les gouttières et l’alignement.

Il n’existe pas de composant de mise en page propre aux formulaires : on utilise la grille (.row, .col-*), les gouttières (.g-*) et les utilitaires d’espacement (.mb-3).

Formulaire empilé#

La disposition la plus simple et la plus lisible : un champ par ligne, séparé par .mb-3. À privilégier sur mobile.

<form>
  <div class="mb-3">
    <label for="mise-nom" class="form-label">Nom complet</label>
    <input type="text" class="form-control" id="mise-nom" autocomplete="name">
  </div>
  <div class="mb-3">
    <label for="mise-benef" class="form-label">IBAN du bénéficiaire</label>
    <input type="text" class="form-control" id="mise-benef" autocomplete="off" placeholder="CI93 CI008 01111 101111111111 36">
  </div>
  <div class="mb-3">
    <label for="mise-montant" class="form-label">Montant (FCFA)</label>
    <input type="text" class="form-control" id="mise-montant" inputmode="numeric">
  </div>
  <button type="button" class="btn btn-primary">Valider le virement</button>
</form>

Champs en colonnes#

Entourez les champs d’une .row et donnez à chacun une largeur .col-*. Les colonnes se superposent sous le point de rupture : ici md (768 px).

<form class="row g-3">
  <div class="col-md-6">
    <label for="mise-prenom" class="form-label">Prénom</label>
    <input type="text" class="form-control" id="mise-prenom" autocomplete="given-name">
  </div>
  <div class="col-md-6">
    <label for="mise-nom-famille" class="form-label">Nom</label>
    <input type="text" class="form-control" id="mise-nom-famille" autocomplete="family-name">
  </div>
  <div class="col-12">
    <label for="mise-adresse" class="form-label">Adresse</label>
    <input type="text" class="form-control" id="mise-adresse" autocomplete="street-address" placeholder="Rue des Jardins, Cocody">
  </div>
  <div class="col-md-6">
    <label for="mise-ville" class="form-label">Ville</label>
    <input type="text" class="form-control" id="mise-ville" autocomplete="address-level2">
  </div>
  <div class="col-md-4">
    <label for="mise-pays" class="form-label">Pays</label>
    <select id="mise-pays" class="form-select" autocomplete="country-name">
      <option selected>Côte d'Ivoire</option>
      <option>Sénégal</option>
      <option>Mali</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="mise-postal" class="form-label">Boîte postale</label>
    <input type="text" class="form-control" id="mise-postal" autocomplete="postal-code">
  </div>
  <div class="col-12">
    <button type="button" class="btn btn-primary">Enregistrer</button>
  </div>
</form>

Formulaire horizontal#

Placez le libellé et le champ dans une .row. .col-form-label aligne le texte du libellé avec le champ. Pour un bloc de cases ou de radios, utilisez <fieldset class="row"> avec .col-form-label pt-0.

<form>
  <div class="row mb-3">
    <label for="mise-h-email" class="col-sm-3 col-form-label">Adresse e-mail</label>
    <div class="col-sm-9">
      <input type="email" class="form-control" id="mise-h-email" autocomplete="email">
    </div>
  </div>
  <div class="row mb-3">
    <label for="mise-h-tel" class="col-sm-3 col-form-label">Téléphone</label>
    <div class="col-sm-9">
      <input type="tel" class="form-control" id="mise-h-tel" autocomplete="tel">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-3 pt-0">Type de compte</legend>
    <div class="col-sm-9">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="mise-h-type" id="mise-h-courant" checked>
        <label class="form-check-label" for="mise-h-courant">Compte courant</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="mise-h-type" id="mise-h-epargne">
        <label class="form-check-label" for="mise-h-epargne">Compte d'épargne</label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-9 offset-sm-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="mise-h-cgu">
        <label class="form-check-label" for="mise-h-cgu">J'accepte les conditions générales</label>
      </div>
    </div>
  </div>
  <button type="button" class="btn btn-primary">Ouvrir le compte</button>
</form>

Tailles des libellés horizontaux#

.col-form-label-sm et .col-form-label-lg suivent la taille du champ voisin.

Agence

<div class="row mb-3">
  <label for="mise-t-sm" class="col-sm-3 col-form-label col-form-label-sm">Agence</label>
  <div class="col-sm-9">
    <input type="text" class="form-control form-control-sm" id="mise-t-sm" value="Abidjan Plateau">
  </div>
</div>
<div class="row">
  <label for="mise-t-lg" class="col-sm-3 col-form-label col-form-label-lg">Agence</label>
  <div class="col-sm-9">
    <input type="text" class="form-control form-control-lg" id="mise-t-lg" value="Abidjan Plateau">
  </div>
</div>

Formulaire en ligne#

Combinez .row, .row-cols-lg-auto et .align-items-center pour afficher un filtre sur une seule ligne à partir de lg. Les libellés restent présents : masquez-les visuellement avec .visually-hidden si le contexte est clair.

<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="mise-f-compte">Compte</label>
    <select class="form-select" id="mise-f-compte">
      <option selected>Compte courant</option>
      <option>Compte d'épargne</option>
    </select>
  </div>
  <div class="col-12">
    <label class="visually-hidden" for="mise-f-min">Montant minimum en FCFA</label>
    <div class="input-group">
      <div class="input-group-text">≥</div>
      <input type="text" class="form-control" id="mise-f-min" placeholder="Montant minimum" inputmode="numeric">
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="mise-f-debits">
      <label class="form-check-label" for="mise-f-debits">Débits uniquement</label>
    </div>
  </div>
  <div class="col-12">
    <button type="button" class="btn btn-primary">Filtrer</button>
  </div>
</form>

Gouttières et espacement#

.g-* règle l’espace entre colonnes et lignes, .gx-* l’espace horizontal et .gy-* l’espace vertical. Les valeurs vont de 0 à 5.

<form class="row gx-5 gy-2">
  <div class="col-sm-6">
    <label for="mise-g-debit" class="form-label">Compte à débiter</label>
    <input type="text" class="form-control" id="mise-g-debit" value="…1136">
  </div>
  <div class="col-sm-6">
    <label for="mise-g-credit" class="form-label">Compte à créditer</label>
    <input type="text" class="form-control" id="mise-g-credit" value="…2204">
  </div>
  <div class="col-sm-6">
    <label for="mise-g-somme" class="form-label">Somme (FCFA)</label>
    <input type="text" class="form-control" id="mise-g-somme" inputmode="numeric">
  </div>
  <div class="col-sm-6">
    <label for="mise-g-date" class="form-label">Date d'exécution</label>
    <input type="date" class="form-control" id="mise-g-date">
  </div>
</form>

Alignement vertical et boutons#

.align-items-end aligne un bouton sur le bas des champs, utile quand un libellé est sur deux lignes. .col-auto donne au bouton sa largeur naturelle.

<form class="row g-3 align-items-end">
  <div class="col-sm">
    <label for="mise-a-montant" class="form-label">Montant à épargner chaque mois (FCFA)</label>
    <input type="text" class="form-control" id="mise-a-montant" inputmode="numeric" placeholder="50 000">
  </div>
  <div class="col-sm">
    <label for="mise-a-duree" class="form-label">Durée (mois)</label>
    <input type="number" class="form-control" id="mise-a-duree" min="6" placeholder="24">
  </div>
  <div class="col-sm-auto">
    <button type="button" class="btn btn-primary">Simuler</button>
  </div>
</form>

Classes de mise en page

Classes de mise en page
Classe	Usage
`.row`, `.col-*`	Grille : conteneur de ligne et largeur des colonnes.
`.col-form-label`	Libellé aligné verticalement avec un champ dans une colonne.
`.col-form-label-sm`, `.col-form-label-lg`	Variantes de taille du libellé horizontal.
`.g-`, `.gx-`, `.gy-*`	Gouttières : espace entre les colonnes et les lignes.
`.row-cols-*`, `.row-cols-lg-auto`	Nombre de colonnes par ligne, ou largeur automatique à partir d’un point de rupture.
`.align-items-*`	Alignement vertical des colonnes d’une ligne.
`.offset-*`	Décalage d’une colonne (cases alignées sur les champs).
`.visually-hidden`	Masque un libellé à l’écran tout en le gardant pour les lecteurs d’écran.

Bonnes pratiques

À faire

Privilégiez le formulaire empilé : il se lit mieux et fonctionne sur tous les écrans.
Regroupez les champs par thème (identité, coordonnées, opération) et séparez les groupes par un espace ou un titre.
Placez le bouton principal en dernier, aligné avec les champs.
Donnez aux champs courts (code postal, date) une largeur proportionnée à la saisie attendue.

À éviter

Ne mettez pas plus de deux champs par ligne sur les écrans moyens ; au-delà, la lecture devient difficile.
Ne placez pas des champs dépendants (jour, mois, année) dans des colonnes éloignées.
Ne masquez pas les libellés sans contexte explicite : un champ nu est inaccessible.

Accessibilité

Conservez l’ordre du DOM identique à l’ordre visuel pour le clavier et les lecteurs d’écran.
Utilisez .visually-hidden plutôt que display: none pour les libellés cachés.
Dans un formulaire horizontal, utilisez <fieldset> et <legend> pour les groupes de cases ou de radios.
Vérifiez le formulaire à 320 px de large et avec 200 % de zoom : rien ne doit déborder.