Formulaires

Champs de texte

La classe .form-control met en forme les champs de saisie (input, textarea, fichier, couleur). Cette page présente les types usuels, les tailles, le texte brut et les états désactivé et lecture seule.

Types de saisie courants#

Choisissez le type qui correspond à la donnée : le navigateur adapte le clavier et vérifie le format. autocomplete accélère la saisie.

<form>
  <div class="mb-3">
    <label for="texte-nom" class="form-label">Nom complet</label>
    <input type="text" class="form-control" id="texte-nom" autocomplete="name" placeholder="Aya Kouassi">
  </div>
  <div class="mb-3">
    <label for="texte-email" class="form-label">Adresse e-mail</label>
    <input type="email" class="form-control" id="texte-email" autocomplete="email" placeholder="aya.kouassi@exemple.ci">
  </div>
  <div class="mb-3">
    <label for="texte-tel" class="form-label">Numéro de téléphone mobile</label>
    <input type="tel" class="form-control" id="texte-tel" autocomplete="tel" inputmode="tel" aria-describedby="texte-tel-aide" placeholder="+225 07 08 09 10 11">
    <div id="texte-tel-aide" class="form-text">Un code de confirmation vous sera envoyé par SMS.</div>
  </div>
  <div class="mb-3">
    <label for="texte-montant" class="form-label">Montant du virement (FCFA)</label>
    <input type="number" class="form-control" id="texte-montant" min="1000" step="1000" inputmode="numeric" value="150000">
  </div>
  <div class="mb-3">
    <label for="texte-naissance" class="form-label">Date de naissance</label>
    <input type="date" class="form-control" id="texte-naissance" autocomplete="bday">
  </div>
  <div class="mb-3">
    <label for="texte-mdp" class="form-label">Mot de passe</label>
    <input type="password" class="form-control" id="texte-mdp" autocomplete="new-password" aria-describedby="texte-mdp-aide">
    <div id="texte-mdp-aide" class="form-text">Au moins 12 caractères, dont un chiffre.</div>
  </div>
</form>

Tailles#

.form-control-lg agrandit le champ, .form-control-sm le réduit. Gardez la taille par défaut pour les formulaires courants ; la petite taille convient aux filtres de tableau.

Numéro de compte (grand)

Numéro de compte (par défaut)

Numéro de compte (petit)

<div class="mb-3">
  <label for="texte-lg" class="form-label">Numéro de compte (grand)</label>
  <input class="form-control form-control-lg" type="text" id="texte-lg" value="01111 101111111111 36">
</div>
<div class="mb-3">
  <label for="texte-md" class="form-label">Numéro de compte (par défaut)</label>
  <input class="form-control" type="text" id="texte-md" value="01111 101111111111 36">
</div>
<div>
  <label for="texte-sm" class="form-label">Numéro de compte (petit)</label>
  <input class="form-control form-control-sm" type="text" id="texte-sm" value="01111 101111111111 36">
</div>

Zone de texte multiligne#

Sur un <textarea>, rows fixe la hauteur initiale. L’utilisateur peut l’agrandir verticalement.

Motif de la réclamation

Décrivez l'opération contestée : date, montant et agence concernée.

Note interne (petite zone)

<div class="mb-3">
  <label for="texte-motif" class="form-label">Motif de la réclamation</label>
  <textarea class="form-control" id="texte-motif" rows="4" aria-describedby="texte-motif-aide"></textarea>
  <div id="texte-motif-aide" class="form-text">Décrivez l'opération contestée : date, montant et agence concernée.</div>
</div>
<div>
  <label for="texte-note" class="form-label">Note interne (petite zone)</label>
  <textarea class="form-control form-control-sm" id="texte-note" rows="2"></textarea>
</div>

Désactivé et lecture seule#

Un champ disabled n’est pas envoyé avec le formulaire. Un champ readonly l’est, mais l’utilisateur ne peut pas le modifier.

Devise du compte

Référence du dossier

<div class="mb-3">
  <label for="texte-devise" class="form-label">Devise du compte</label>
  <input class="form-control" type="text" id="texte-devise" value="Franc CFA (XOF)" disabled>
</div>
<div>
  <label for="texte-ref" class="form-label">Référence du dossier</label>
  <input class="form-control" type="text" id="texte-ref" value="DOS-2026-004217" readonly>
</div>

Texte brut en lecture seule#

.form-control-plaintext retire le cadre et le fond d’un champ readonly pour l’afficher comme du texte, tout en gardant l’alignement d’un formulaire. Combinez-le avec .col-form-label et la grille pour une fiche récapitulative.

Titulaire

Solde disponible

Agence

<div class="mb-3 row">
  <label for="texte-recap-titulaire" class="col-sm-3 col-form-label">Titulaire</label>
  <div class="col-sm-9">
    <input type="text" readonly class="form-control-plaintext" id="texte-recap-titulaire" value="Aya Kouassi">
  </div>
</div>
<div class="mb-3 row">
  <label for="texte-recap-solde" class="col-sm-3 col-form-label">Solde disponible</label>
  <div class="col-sm-9">
    <input type="text" readonly class="form-control-plaintext" id="texte-recap-solde" value="1 250 000 FCFA">
  </div>
</div>
<div class="row">
  <label for="texte-recap-agence" class="col-sm-3 col-form-label">Agence</label>
  <div class="col-sm-9">
    <input type="text" readonly class="form-control-plaintext" id="texte-recap-agence" value="Abidjan Plateau">
  </div>
</div>

Envoi de fichier#

Avec type="file", le bouton « Parcourir » reprend le style Cauri. Ajoutez multiple pour plusieurs fichiers et accept pour limiter les formats.

Pièce d'identité (PDF ou image)

Taille maximale : 5 Mo.

Justificatifs de revenus (plusieurs fichiers)

Photo d'identité (petit)

<div class="mb-3">
  <label for="texte-cni" class="form-label">Pièce d'identité (PDF ou image)</label>
  <input class="form-control" type="file" id="texte-cni" accept=".pdf,image/*" aria-describedby="texte-cni-aide">
  <div id="texte-cni-aide" class="form-text">Taille maximale : 5 Mo.</div>
</div>
<div class="mb-3">
  <label for="texte-justif" class="form-label">Justificatifs de revenus (plusieurs fichiers)</label>
  <input class="form-control" type="file" id="texte-justif" multiple accept=".pdf">
</div>
<div>
  <label for="texte-photo" class="form-label">Photo d'identité (petit)</label>
  <input class="form-control form-control-sm" type="file" id="texte-photo" accept="image/*">
</div>

Sélecteur de couleur#

Ajoutez .form-control-color à un input type="color" pour un sélecteur compact. Le champ a besoin d’un libellé comme les autres, par exemple pour personnaliser un thème de carte.

Couleur de la carte virtuelle

<label for="texte-couleur" class="form-label">Couleur de la carte virtuelle</label>
<input type="color" class="form-control form-control-color" id="texte-couleur" value="#2B62AA" title="Choisir une couleur">

Classes de champ de texte

Classes de champ de texte
Classe	Effet
`.form-control`	Style de base : largeur 100 %, bordure, focus visible.
`.form-control-sm`	Hauteur et police réduites.
`.form-control-lg`	Hauteur et police agrandies.
`.form-control-plaintext`	Affiche un champ `readonly` comme du texte, sans cadre.
`.form-control-color`	Dimensionne un `input type="color"` (3 rem de large).
`.col-form-label`	Aligne verticalement un libellé placé dans une colonne de la grille.
`.col-form-label-sm`, `.col-form-label-lg`	Variantes de taille pour accompagner `.form-control-sm` et `.form-control-lg`.

Bonnes pratiques

À faire

Choisissez le type exact (email, tel, number, date) et ajoutez inputmode quand le clavier mobile compte.
Précisez le format attendu dans une aide visible : « +225 suivi de 10 chiffres », « montant en FCFA, sans espace ».
Renseignez autocomplete pour les données personnelles (name, email, tel, bday, street-address).
Dimensionnez les textarea avec rows selon la longueur de réponse attendue.

À éviter

N’utilisez pas type="number" pour un IBAN, un numéro de téléphone ou de carte : préférez text avec inputmode="numeric".
Ne limitez pas arbitrairement la longueur d’un nom ou d’une adresse.
Ne vous fiez pas à accept pour sécuriser un envoi : contrôlez aussi le fichier côté serveur.

Accessibilité

Chaque champ, y compris le sélecteur de couleur et l’envoi de fichier, doit avoir un <label> visible et relié.
Un champ disabled n’est pas atteignable au clavier : n’y mettez pas d’information indispensable.
Reliez l’aide (format, taille maximale) au champ avec aria-describedby.
Ne retirez jamais l’indicateur de focus ; Cauri le fournit par défaut.