Skip to Content
BootstrapPartie 6 — Formulaires6.1 — Form controls & select

6.1 — Form controls & select

⏱️ TL;DR — Ajoutez .form-control à un <input>/<textarea> et .form-select à un <select> pour un style cohérent. Associez toujours un <label class="form-label">. Tailles -sm/-lg, états disabled/readonly, aide contextuelle avec .form-text.

🎯 Objectifs

  • Styliser champs texte, textarea et select.
  • Associer labels et textes d’aide.
  • Gérer tailles et états.

Champs texte

<div class="mb-3">
  <label for="email" class="form-label">Adresse e-mail</label>
  <input type="email" class="form-control" id="email" placeholder="nom@exemple.fr">
  <div class="form-text">Nous ne la partagerons jamais.</div>
</div>
  • form-label pour le label, form-text pour l’aide.
  • Le for du label = l’id du champ (accessibilité).

Textarea

<label for="msg" class="form-label">Message</label>
<textarea class="form-control" id="msg" rows="3"></textarea>

Select

<select class="form-select" aria-label="Choix">
  <option selected>Choisir…</option>
  <option value="1">Un</option>
  <option value="2">Deux</option>
</select>
 
<!-- sélection multiple -->
<select class="form-select" multiple>…</select>

Tailles et états

<input class="form-control form-control-lg" placeholder="Grand">
<input class="form-control form-control-sm" placeholder="Petit">
<input class="form-control" value="Lecture seule" readonly>
<input class="form-control" placeholder="Désactivé" disabled>

Input de fichier, couleur, plage de dates

<input class="form-control" type="file">
<input class="form-control form-control-color" type="color" value="#7952b3">
<input class="form-control" type="date">

Bootstrap 5 style désormais l’input file nativement (plus besoin du hack custom-file de la v4).

⚠️ Piège — Un champ sans <label> associé (ou sans aria-label) est un problème d’accessibilité majeur. Le placeholder ne remplace pas un label.

💡 Pour un dev React — En React contrôlé, ces champs prennent value + onChange comme d’habitude ; les classes Bootstrap ne changent rien à la logique. form-control est purement visuel. Pensez juste à relier htmlFor/id (attention : htmlFor en JSX, pas for).

✏️ Exercices

  1. Un champ mot de passe avec label et texte d’aide.

✅ Solution

<label for="pw" class="form-label">Mot de passe</label>
<input type="password" class="form-control" id="pw">
<div class="form-text">8 caractères minimum.</div>
  1. Un select de pays, taille large.

✅ Solution

<select class="form-select form-select-lg">…</select>.

🧠 Quiz de révision

1. Quelle classe pour un input texte ?

form-control.

2. Quelle classe pour un <select> ?

form-select.

3. Comment relier un label à un champ ?

L’attribut for du label = l’id du champ.

4. Le placeholder remplace-t-il un label ?

Non, jamais (accessibilité).

5. Quelle classe pour un texte d’aide sous un champ ?

form-text.

Chapitre suivant : 6.2 — Checks, radios, switches, range

Vue d'ensemble6.2 — Checks, radios, switches, range