Les formulaires de base Bootstrap

1. Objectifs

   • Connaître la structure des formulaires de base en Bootstrap 5.3
   • Être capable de créer et de mettre en forme un formulaire vertical avec les classes de Bootstrap 5.3
2.  

1. Présentation

   • Bootstrap 5.3 propose plusieurs dispositions (mises en page) de formulaires :
     • Formulaire vertical (par défaut) : chaque étiquette est placée au-dessus de son champ ;
     • Formulaire en ligne : les champs sont alignés sur une même ligne (avec la grille ou les utilitaires flex) ;
     • Formulaire horizontal : l'étiquette et le champ sont côte à côte (avec la grille .row / .col-*).
   • Remarque : depuis Bootstrap 5, les classes .form-group, .form-inline, .help-block, .checkbox et .btn-default n'existent plus. On utilise à la place les utilitaires d'espacement (.mb-3), .form-text, .form-check et .btn-primary / .btn-secondary.

2. Créer un formulaire de base

   • Bootstrap fournit des styles prêts à l'emploi pour les contrôles de formulaire : il suffit d'ajouter les bonnes classes aux éléments HTML.
   • Pour créer un formulaire de base, procédez comme suit :
     1. Placez les champs dans un élément <form> (l'attribut role="form" n'est plus nécessaire).
     2. Enveloppez chaque couple étiquette / champ dans un <div> avec la classe utilitaire .mb-3 pour obtenir un espacement vertical régulier.
     3. Ajoutez la classe .form-label aux éléments <label> et vérifiez que l'attribut for correspond bien à l'id du champ.
     4. Ajoutez la classe .form-control aux éléments <input> (y compris type="file") et <textarea>.
     5. Utilisez la classe .form-select pour les listes déroulantes <select>.
     6. Pour les cases à cocher et boutons radio, utilisez un conteneur .form-check avec .form-check-input et .form-check-label.
     7. Pour un texte d'aide sous un champ, utilisez la classe .form-text.

<form>
  <div class="mb-3">
    <label for="nom" class="form-label">Nom</label>
    <input type="text" class="form-control" id="nom" placeholder="Saisir votre nom">
  </div>
  <div class="mb-3">
    <label for="prenom" class="form-label">Prénom</label>
    <input type="text" class="form-control" id="prenom" placeholder="Saisir votre prénom">
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Adresse e-mail</label>
    <input type="email" class="form-control" id="email" aria-describedby="emailAide" placeholder="nom@exemple.com">
    <div id="emailAide" class="form-text">Nous ne partagerons jamais votre adresse e-mail.</div>
  </div>
  <div class="mb-3">
    <label for="filiere" class="form-label">Filière</label>
    <select class="form-select" id="filiere">
      <option selected>Choisir une filière</option>
      <option value="1">Développement web</option>
      <option value="2">Développement mobile</option>
    </select>
  </div>
  <div class="mb-3">
    <label for="fichier" class="form-label">Télécharger un fichier</label>
    <input type="file" class="form-control" id="fichier" aria-describedby="fichierAide">
    <div id="fichierAide" class="form-text">Exemple de texte d'aide.</div>
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="accepter">
    <label class="form-check-label" for="accepter">J'accepte les conditions</label>
  </div>
  <button type="submit" class="btn btn-primary">Soumettre</button>
</form>

• Ce qui nous donne la figure suivante.

1. Regrouper des champs avec <fieldset>

   • L'élément HTML <fieldset> (ce n'est pas une classe) permet de regrouper plusieurs champs liés, avec un titre <legend>.
   • L'attribut disabled placé sur le <fieldset> désactive tous les champs qu'il contient.

<form>
  <fieldset disabled>
    <legend>Informations (désactivées)</legend>
    <div class="mb-3">
      <label for="ville" class="form-label">Ville</label>
      <input type="text" id="ville" class="form-control" placeholder="Champ désactivé">
    </div>
    <button type="submit" class="btn btn-primary">Envoyer</button>
  </fieldset>
</form>

1. Taille des contrôles de formulaire

   • Par défaut, les éléments <input>, <textarea> et <select> qui portent la classe .form-control ou .form-select occupent 100 % de la largeur de leur conteneur.
   • Pour modifier la hauteur d'un champ, ajoutez :
     • .form-control-lg / .form-select-lg: grande taille ;
     • .form-control-sm / .form-select-sm: petite taille.
   • Pour limiter la largeur, placez le champ dans une colonne de la grille (.row / .col-md-6, etc.) ou utilisez les utilitaires de largeur (.w-50, .w-75).

<input class="form-control form-control-lg mb-2" type="text" placeholder="Grand champ">
<input class="form-control mb-2" type="text" placeholder="Champ par défaut">
<input class="form-control form-control-sm mb-2" type="text" placeholder="Petit champ">

<select class="form-select form-select-sm w-50">
  <option selected>Petite liste, largeur 50 %</option>
</select>

1. Champs en lecture seule et désactivés

   • L'attribut readonly empêche la modification du champ, mais sa valeur est envoyée avec le formulaire.
   • L'attribut disabled grise le champ : il n'est ni modifiable ni envoyé.
   • La classe .form-control-plaintext (avec readonly) affiche la valeur comme du texte simple, sans bordure.

<input class="form-control mb-2" type="text" value="Lecture seule" readonly>
<input class="form-control mb-2" type="text" placeholder="Champ désactivé" disabled>
<input class="form-control-plaintext" type="text" value="email@exemple.com" readonly>