Contrôles de formulaire pris en charge en Bootstrap

1. Objectifs

   • Connaître les contrôles de formulaire pris en charge par Bootstrap 5.3 et les classes associées
   • Être capable de mettre en forme champs de saisie, zones de texte, cases à cocher, boutons radio, interrupteurs, listes et curseurs avec Bootstrap 5.3
2.  

1. Présentation

   • Bootstrap 5.3 met en forme de manière native les contrôles de formulaire les plus courants : <input>, <textarea>, <select>, ainsi que les cases à cocher (<input type="checkbox">) et les boutons radio (<input type="radio">).
   • Attention : <checkbox> et <radio> ne sont pas des balises HTML. Ce sont des types de l'élément <input>.
   • Le tableau suivant résume les classes à utiliser :

1. Les <input>

   • Le champ de saisie le plus courant est <input>. C'est là que les utilisateurs saisissent la plupart des données du formulaire.
   • Bootstrap prend en charge tous les types <input> HTML5 natifs : text, password, datetime-local, date, month, time, week, number, email, url, search, tel et color.
   • Il faut déclarer le bon attribut type: le navigateur adapte alors le clavier (mobile), la validation et l'affichage.
   • Chaque <label> doit avoir un attribut for identique à l'id du champ.

<form>
  <div class="row mb-3">
    <label for="prenom" class="col-sm-2 col-form-label">Prénom</label>
    <div class="col-sm-8">
      <input type="text" class="form-control" id="prenom" placeholder="Entrez votre prénom">
    </div>
  </div>
  <div class="row mb-3">
    <label for="motdepasse" class="col-sm-2 col-form-label">Mot de passe</label>
    <div class="col-sm-8">
      <input type="password" class="form-control" id="motdepasse">
    </div>
  </div>
  <div class="row mb-3">
    <label for="naissance" class="col-sm-2 col-form-label">Date de naissance</label>
    <div class="col-sm-8">
      <input type="date" class="form-control" id="naissance">
    </div>
  </div>
</form>

• Pour le type color, ajoutez la classe .form-control-color en plus de .form-control:

<label for="couleur" class="form-label">Couleur préférée</label>
<input type="color" class="form-control form-control-color" id="couleur" value="#0d6efd" title="Choisir une couleur">

1. Les <textarea>

   • Le <textarea> est utilisé lorsque vous avez besoin d'une saisie sur plusieurs lignes.
   • Modifiez l'attribut rows selon le besoin (moins de lignes = zone plus petite, plus de lignes = zone plus grande).

<form>
  <div class="row mb-3">
    <label for="commentaire" class="col-sm-2 col-form-label">Commentaire</label>
    <div class="col-sm-8">
      <textarea class="form-control" id="commentaire" rows="3"></textarea>
    </div>
  </div>
</form>

1. Les cases à cocher (checkbox)

   • Les cases à cocher sont idéales lorsque l'utilisateur peut choisir zéro, une ou plusieurs options dans une liste prédéfinie.
   • Chaque case est placée dans un conteneur .form-check, avec .form-check-input sur l'<input> et .form-check-label sur le <label>.
   • Pour afficher les cases sur une même ligne, ajoutez .form-check-inline au conteneur.
   • Chaque id doit être unique dans la page.

<form>
  <p class="form-label">Exemple de cases à cocher par défaut</p>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="option1" id="check1">
    <label class="form-check-label" for="check1">Option 1</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="option2" id="check2" checked>
    <label class="form-check-label" for="check2">Option 2 (cochée)</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="option3" id="check3" disabled>
    <label class="form-check-label" for="check3">Option 3 (désactivée)</label>
  </div>

  <p class="form-label mt-3">Exemple de cases à cocher en ligne</p>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" value="option1" id="inlineCheck1">
    <label class="form-check-label" for="inlineCheck1">Option 1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" value="option2" id="inlineCheck2">
    <label class="form-check-label" for="inlineCheck2">Option 2</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" value="option3" id="inlineCheck3">
    <label class="form-check-label" for="inlineCheck3">Option 3</label>
  </div>
</form>

• Ce qui nous donne :

1. Les interrupteurs (switch)

   • Un interrupteur est une case à cocher affichée sous forme de bouton glissant : il convient bien aux choix de type activé / désactivé.
   • Ajoutez la classe .form-switch au conteneur .form-check, et l'attribut role="switch" sur l'<input> pour l'accessibilité.

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="notifications" checked>
  <label class="form-check-label" for="notifications">Recevoir les notifications</label>
</div>

1. Les boutons radio

   • Les boutons radio s'utilisent lorsque l'utilisateur doit choisir une seule option dans une liste prédéfinie.
   • Tous les boutons d'un même groupe doivent avoir le même attribut name: c'est lui qui rend les choix exclusifs.
   • Un seul bouton du groupe peut porter l'attribut checked (option sélectionnée par défaut).
   • Pour afficher les boutons sur une même ligne, ajoutez .form-check-inline au conteneur.

<form>
  <p class="form-label">Exemple de boutons radio par défaut</p>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="niveau" id="niveau1" value="debutant" checked>
    <label class="form-check-label" for="niveau1">Débutant</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="niveau" id="niveau2" value="intermediaire">
    <label class="form-check-label" for="niveau2">Intermédiaire</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="niveau" id="niveau3" value="avance">
    <label class="form-check-label" for="niveau3">Avancé</label>
  </div>

  <p class="form-label mt-3">Exemple de boutons radio en ligne</p>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="genre" id="genre1" value="f" checked>
    <label class="form-check-label" for="genre1">Femme</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="genre" id="genre2" value="h">
    <label class="form-check-label" for="genre2">Homme</label>
  </div>
</form>

• Ce qui nous donne :

1. Cases et radios sous forme de boutons

   • Bootstrap 5.3 permet d'afficher une case à cocher ou un bouton radio comme un bouton : on ajoute .btn-check à l'<input> et une classe .btn au <label>.
   • Pour coller les boutons entre eux, on les regroupe dans un conteneur .btn-group.

<div class="btn-group" role="group" aria-label="Choix de la session">
  <input type="radio" class="btn-check" name="session" id="matin" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="matin">Matin</label>

  <input type="radio" class="btn-check" name="session" id="apresmidi" autocomplete="off">
  <label class="btn btn-outline-primary" for="apresmidi">Après-midi</label>

  <input type="radio" class="btn-check" name="session" id="soir" autocomplete="off">
  <label class="btn btn-outline-primary" for="soir">Soir</label>
</div>

1. Les <select>

   • Une liste de sélection permet à l'utilisateur de choisir parmi plusieurs options. Par défaut, une seule option peut être choisie.
     • Utilisez <select> pour des listes d'options que l'utilisateur connaît bien, comme des villes ou des nombres.
     • Ajoutez l'attribut multiple pour permettre la sélection de plusieurs options (touche Ctrl / Cmd).
     • L'attribut size fixe le nombre d'options visibles.
   • En Bootstrap 5.3, un <select> utilise la classe .form-select (et non plus .form-control).

<form>
  <div class="mb-3">
    <label for="ville" class="form-label">Liste de sélection</label>
    <select class="form-select" id="ville">
      <option selected disabled value="">Choisir une ville</option>
      <option value="tunis">Tunis</option>
      <option value="nabeul">Nabeul</option>
      <option value="sousse">Sousse</option>
      <option value="sfax">Sfax</option>
    </select>
  </div>
  <div class="mb-3">
    <label for="langages" class="form-label">Liste de sélection multiple</label>
    <select class="form-select" id="langages" multiple size="4">
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="js">JavaScript</option>
      <option value="php">PHP</option>
      <option value="dart">Dart</option>
    </select>
  </div>
</form>

• Ce qui nous donne :

1. Les listes de suggestions (<datalist>)

   • L'élément <datalist> propose des suggestions pendant la saisie, tout en laissant l'utilisateur taper une valeur libre.
   • On le relie au champ grâce à l'attribut list, et on ajoute la classe .form-control au champ.

<label for="framework" class="form-label">Framework préféré</label>
<input class="form-control" list="listeFrameworks" id="framework" placeholder="Tapez pour rechercher...">
<datalist id="listeFrameworks">
  <option value="Bootstrap">
  <option value="Tailwind CSS">
  <option value="Symfony">
  <option value="Laravel">
  <option value="Flutter">
</datalist>

1. Les curseurs (range)

   • Le type range permet de choisir une valeur numérique en déplaçant un curseur.
   • On utilise la classe .form-range (et non .form-control), avec les attributs min, max et step.

<label for="satisfaction" class="form-label">Niveau de satisfaction (0 à 10)</label>
<input type="range" class="form-range" min="0" max="10" step="1" id="satisfaction">

1. Les étiquettes flottantes (floating labels)

   • Avec la classe .form-floating, l'étiquette s'affiche à l'intérieur du champ puis remonte au-dessus lors de la saisie.
   • L'<input> doit être placé avant le <label> et posséder un attribut placeholder (même s'il n'est pas affiché).

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="emailFlottant" placeholder="nom@exemple.com">
  <label for="emailFlottant">Adresse e-mail</label>
</div>
<div class="form-floating">
  <textarea class="form-control" id="messageFlottant" placeholder="Votre message" style="height: 100px"></textarea>
  <label for="messageFlottant">Message</label>
</div>