6.4 — Disposition des formulaires

⏱️ TL;DR — Pour agencer un formulaire, on réutilise la grille (row + col) avec .g-* pour l’espacement, .row-cols, et des utilitaires. Les labels horizontaux se font avec col-form-label + align-items-center. .row-cols-auto sert aux formulaires en ligne.

🎯 Objectifs

• Disposer des champs sur plusieurs colonnes.
• Créer des labels horizontaux alignés.
• Faire un formulaire en ligne.

Formulaire en grille

<form class="row g-3">
  <div class="col-md-6">
    <label class="form-label">Prénom</label>
    <input class="form-control">
  </div>
  <div class="col-md-6">
    <label class="form-label">Nom</label>
    <input class="form-control">
  </div>
  <div class="col-12">
    <label class="form-label">Adresse</label>
    <input class="form-control">
  </div>
  <div class="col-md-4">
    <label class="form-label">Ville</label>
    <input class="form-control">
  </div>
  <div class="col-12">
    <button class="btn btn-primary">Envoyer</button>
  </div>
</form>

Labels horizontaux

<div class="row mb-3 align-items-center">
  <label class="col-sm-3 col-form-label">E-mail</label>
  <div class="col-sm-9">
    <input type="email" class="form-control">
  </div>
</div>

col-form-label aligne verticalement le label avec le champ.

Formulaire en ligne

<form class="row row-cols-lg-auto g-2 align-items-center">
  <div class="col-12">
    <input class="form-control" placeholder="Recherche">
  </div>
  <div class="col-12">
    <select class="form-select"><option>Filtre</option></select>
  </div>
  <div class="col-12">
    <button class="btn btn-primary">OK</button>
  </div>
</form>

Espacement

Utilisez g-3 sur la row pour espacer les champs, et mb-3 entre les groupes verticaux. C’est plus fiable que des marges au cas par cas.

⚠️ Piège — Empiler des mb-3 et des g-3 crée un double espacement irrégulier. Choisissez une stratégie : soit la grille avec gouttières, soit des marges sur chaque groupe.

💡 Pour un dev React — Un formulaire long gagne à être découpé en composants (<FormRow>, <FormField>) qui encapsulent la structure col + label + control. Les classes Bootstrap restent identiques ; vous factorisez juste le markup.

✏️ Exercices

1. Un formulaire prénom/nom sur deux colonnes dès md, empilé en dessous.

2. Un label « Téléphone » horizontal, aligné avec son champ.

🧠 Quiz de révision

Chapitre suivant : 6.5 — Validation