Les formulaires sont très souvent utilisés sur les pages web, voyons dans ce chapitre ce que Bootstrap nous propose comme mise en forme.

La page d’exemple

J’ai ajouté un formulaire de contact dans la partie inférieure de la page d’exemple :

<section class="row justify-content-center">
  <div class="col-md-8">
    <p class="lead font-weight-bold">Si vous voulez me laisser un message</p>
    <form>            
      <p class="lead">Comment m'avez-vous trouvé ?</p>
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="origine" value="ami" checked>
          Par un ami 
        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="origine" value="web">
          Sur le web 
        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="origine" value="hasard">
          Par hasard 
        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="origine" value="autre">
          Autre... 
        </label>
      </div>
      <div class="form-group">
        <label for="textarea">Votre message :</label>
        <textarea id="textarea" class="form-control" rows="4"></textarea>
        <small class="form-text text-muted">Vous pouvez agrandir la fenêtre</small>
      </div>
      <button class="btn" type="submit">Envoyer</button>
    </form>
    <br>
  </div>
</section>

Avec la grille, pour les tablettes et écrans plus grands, on a un formulaire centré :

Sur smartphone le formulaire occupe toute la largeur disponible.

Tester en ligne

Formulaire de base

Si on n’utilise aucune classe particulière dans une balise <form>, on obtient une disposition en ligne. Prenons l’exemple d’un formulaire simple :

<form>        
  Text : <input type="text">
  Textarea : <textarea>Un peu de texte ici</textarea>
  Select :
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <button>Envoyer</button>
</form>

Nous aurons alors ce rendu :

Par défaut les contrôles s’alignent horizontalement. J’aimerais que les contrôles occupent toute la largeur disponible et soient plus jolis. Il faut utiliser la classe form-control pour obtenir cet effet :

<form>
  <label for="texte">Text : </label>
  <input id="text" type="text" class="form-control">
  <label for="textarea">Textarea : </label>
  <textarea id="textarea" class="form-control">Un peu de texte ici</textarea>
  <label for="select">Select : </label>
  <select id="select" class="form-control">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <button>Envoyer</button>
</form>

C’est déjà bien mieux ! Arrangeons encore ce formulaire en utilisant des balises <label> et la classe form-group :‌

<form>
  <div class="form-group">
    <label for="texte">Text : </label>
    <input id="texte" type="text" class="form-control">
  </div>
  <div class="form-group">
    <label for="textarea">Textarea : </label>
    <textarea id="textarea" class="form-control">Un peu de texte ici</textarea>
  </div>
  <div class="form-group">
    <label for="select">Select : </label>
    <select id="select" class="form-control">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>
  <button>Envoyer</button>
</form>

Le formulaire est maintenant bien aéré avec ajout de marges et présente l’aspect standard d’un formulaire avec Bootstrap.

Nouvel aspect des listes de choix

La version 4 de Bootstrap nous propose un autre aspect pour les listes de choix avec la classe custom-select :

<label for="select">Select : </label>
<select id="select" class="custom-select">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Boutons « radio » et cases à cocher

Aspect standard

Bootstrap propose pour les boutons « radio » et les cases à cocher des classes spécifiques :

• form-check
• form-check-label
• form-check-input

Je les ai utilisées dans le formulaire de la page :

<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="origine" value="ami" checked>
    Par un ami 
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="origine" value="web">
    Sur le web 
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="origine" value="hasard">
    Par hasard 
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="origine" value="autre">
    Autre... 
  </label>
</div>

Avec un rendu plutôt esthétique :

Prévoyez toujours une balise label pour obtenir un affichage correct à moins que vous ne désiriez appliquer un style personnalisé.

On utilise la même syntaxe pour les cases à cocher (il suffit en fait de changer le type) :

<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="origine" value="ami" checked>
    Par un ami 
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="origine" value="web">
    Sur le web 
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="origine" value="hasard">
    Par hasard 
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="origine" value="autre">
    Autre... 
  </label>
</div>

Avec le même type de rendu :

Par défaut les contrôles s’empilent. Si on les veut en ligne il faut utiliser la classe form-check-inline :

<div class="form-check form-check-inline">

Pour avoir un bouton « radio » ou une case à cocher désactivé(e) il faut associer la classe disabled à la classe form-check.

Nouvel aspect

La version 4 de Bootstrap nous offre un aspect  encore plus spécifique avec de nouvelles classes. Regardez cet exemple :

<label class="custom-control custom-radio"> 
  <input class="custom-control-input" type="radio" name="origine" value="ami" checked>
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Par un ami</span>
</label>

Vous préférez ce nouveau look ? On peut avoir le même avec les cases à cocher :

<label class="custom-control custom-checkbox"> 
  <input class="custom-control-input" type="checkbox" name="origine" value="ami" checked>
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Par un ami</span>
</label>

Pour désactiver avec ce nouvel aspect il faut ajouter l’attribut disabled dans la balise input.

Utilisation de la grille et formulaire en ligne

Utilisation de la grille

Pour organiser visuellement un formulaire on peut évidemment utiliser la grille :

<form class="col-md-6">
  <div class="form-group row">
    <label for="text" class="col-md-3 col-form-label">Text :</label>
    <div class="col-md-9">
      <input type="text" class="form-control" id="text">
    </div>
  </div>
  <div class="form-group row">
    <label for="textarea" class="col-md-3 col-form-label">Textarea :</label>
    <div class="col-md-9">
      <input type="textarea" class="form-control" id="textarea">
    </div>
  </div>
  <div class="form-group row">
    <label for="select" class="col-md-3 form-control-label">Select :</label>
    <div class="col-md-9">
      <select id="select" class="form-control" >
        <option>Option 1</option>
        <option>Option 3</option>
        <option>Option 3</option>
      </select>
    </div>
  </div>
  <div class="form-group row">
    <div class="col">
      <button type="submit" class="btn">Envoyer</button>
    </div>
  </div>
</form>

Les étiquettes disposent de 3 colonnes et les champs de saisie de 9 colonnes. Voici une visualisation du découpage :

Formulaire en ligne

Il arrive qu’on ait besoin d’avoir un formulaire disposé sur une ligne, par exemple dans une barre de navigation.  On dispose pour cela de la la classe form-inline :

<form class="form-inline">
  <label for="text">Texte</label>
  <input type="text" class="form-control" id="text" placeholder="un texte ici">
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Se rappeler de moi...
    </label>
  </div>
  <button type="submit" class="btn">Envoyer</button>
</form>

On a bien tout sur une ligne mais ça manque de marges. On dispose des utilitaires d’espacement qu’on a vus avec la grille. Par exemple :

<form class="form-inline">
  <label for="text" class="mr-2">Texte</label>
  <input type="text" class="form-control mr-2" id="text" placeholder="un texte ici">
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Se rappeler de moi...
    </label>
  </div>
  <button type="submit" class="btn ml-2">Envoyer</button>
</form>

Si vous réduisez la largeur de l’affichage au-dessous de 576 pixels alors les contrôles vont s’empiler :

Ce comportement est judicieux parce qu’il n’y aurait plus vraiment la place d’afficher un formulaire en ligne.

Les étiquettes prennent de la place dans un formulaire en ligne. Ne serait-il pas mieux de ne pas en mettre ?

C’est effectivement une bonne idée mais il ne faut pas oublier l’accessibilité des formulaires. Il existe des lecteurs d’écran qui nécessitent la présence d’étiquettes, alors comment faire ? Bootstrap nous propose la classe sr-only pour résoudre ce problème facilement :

<label for="text" class="sr-only">Texte</label>

L’étiquette ne sera active que pour les lecteurs d’écran.

Les groupes de contrôles

Avec Bootstrap on peut facilement ajouter à un contrôle de formulaire du texte, un ou plusieurs boutons… Voyons cela.

Accoler une information à un contrôle

Les classes input-group, input-group-prepend et input-group-append servent à accoler une information à un contrôle de formulaire :

<form class="form-inline">
  <div class="input-group"> 
    <div class="input-group-prepend">
      <span class="input-group-text">€</span>
    </div>
    <input type="text" class="form-control" value="100">
  </div>
  <div class="input-group">
    <input type="text" class="form-control text-right" value="100,50">
    <div class="input-group-append">
      <span class="input-group-text">€</span>
    </div> 
  </div>
</form>

Il est possible d’ajuster la dimension globale du groupement avec les classes input-group-* :

<form class="form-inline">
  <div class="input-group input-group-lg"> 
    <div class="input-group-prepend">
      <span class="input-group-text">€</span>
    </div>
    <input type="text" class="form-control" value="100">
  </div>
  <div class="input-group input-group-sm">
    <input type="text" class="form-control text-right" value="100,50">
    <div class="input-group-append">
      <span class="input-group-text">€</span>
    </div> 
  </div>
</form>

On peut aussi les utiliser conjointement pour accoler devant et derrière :

<form class="form-inline">
  <div class="input-group"> 
    <div class="input-group-prepend">
      <span class="input-group-text">€</span>
    </div>
    <input type="text" class="form-control text-right" value="100">
    <div class="input-group-append">
      <span class="input-group-text">.00</span>
    </div> 
  </div>
</form>

Accoler un contrôle à un contrôle

Le seul cas intéressant de l’accolement de deux contrôles est celui de l’utilisation d’un bouton « radio » ou d’une case à cocher :

<form>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="checkbox">
        </div>
      </div>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">
        <input type="radio">
        </div>
      </div>
      <input type="text" class="form-control">
    </div>
  </div>
</form>

On peut de la même manière accoler un bouton.

Effets particuliers

Dans ce sous-chapitre nous allons voir un certain nombre d’effets qui peuvent être utiles. Voici un code récapitulatif :

<form>
  <div class="form-group row">
    <label class="col-md-4 col-form-label text-right">Contrôle statique :</label>
    <div class="col-md-8">
      <p class="form-control-static">Ce contrôle est statique</p>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-4 col-form-label text-right" for="inactif">Contrôle désactivé :</label>
    <div class="col-md-8">
      <input type="text" id="inactif" class="form-control" placeholder="Ce contrôle n'est pas actif" disabled>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-4 col-form-label text-right" for="inactif">Contrôle en lecture seule :</label>
    <div class="col-md-8">
      <input type="text" id="inactif" class="form-control" placeholder="Ce contrôle est en lecture seule" readonly>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-4 col-form-label form-control-lg text-right" for="inactif">Contrôle géant :</label>
    <div class="col-md-8">
      <input type="text" id="inactif" class="form-control form-control-lg" placeholder="Ce contrôle est géant">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-4 col-form-label form-control-sm text-right" for="inactif">Contrôle petit :</label>
    <div class="col-md-8">
      <input type="text" id="inactif" class="form-control form-control-sm" placeholder="Ce contrôle est petit">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-4 col-form-label form-control-sm text-right" for="inactif">Contrôle normal :</label>
    <div class="col-md-8">
      <input type="text" id="inactif" class="form-control" placeholder="Ce contrôle est normal">
      <small class="form-text text-muted">Un petit texte explicatif pour le contrôle</small>
    </div>
  </div>
</form>

Avec ce rendu :

• Un contrôle statique (on a du texte à la place d’un contrôle de saisie) se crée avec la classe ‌form-control-static.
• Un contrôle est désactivé avec l’attribut disabled.
• Un contrôle est en lecture seule avec l’attribut readonly.
• Un contrôle est dimensionné avec une classe form-control-*.
• Pour ajouter un texte d’aide la classe text-muted est parfaite associée à la classe form-text.

En résumé

• Bootstrap propose de nombreuses classes pour réaliser des formulaires esthétiques.
• La version 4 introduit de nouveaux aspects pour les boutons radio, les cases à cocher et les listes de choix.
• On peut réaliser des formulaires classiques ou en ligne, d’autre part on peut les organiser avec la grille.
• De nombreuses classes utilitaires permettent de peaufiner les formulaires : dimension des contrôles, contrôle statique, inactif, en lecture seule…
• On peut grouper un contrôle avec du texte, un bouton radio, une case à cocher ou un bouton.