Bootstrap pour les formulaires

Bootstrap redéfinie l'affichage des champs de formulaire pour :

• faciliter leur mise en page
• uniformiser les styles à travers tous les navigateurs
• adapter aux normes actuelles

Champs input

Les champs simples fonctionnent avec 2 classes :

• Classe pour le champ : form-control
• Classe pour le libellé : form-label

Exemple :

<label for="prenom" class="form-label">Prénom</label>
<input type="text" id="prenom" class="form-control">

<label for="age" class="form-label">Âge</label>
<input type="number" id="age" class="form-control">

Cases à cocher

Pour créer une case à cocher, simplement ajouter la classe check sur la balise <input>.

<input type="checkbox" id="optionChoisie" class="check">

Il existe aussi les classes de thème de couleur pour les cases à cocher :

  <input type="checkbox" class="check theme-primary">

  <input type="checkbox" class="check theme-accent" >

  <input type="checkbox" class="check theme-success">

  <input type="checkbox" class="check theme-danger">

  <input type="checkbox" class="check theme-warning">

  <input type="checkbox" class="check theme-info">

  <input type="checkbox" class="check theme-inverse">

  <input type="checkbox" class="check theme-secondary">

Boutons radio

Boutons radio

Pour les boutons radio mutuellement exclusifs (un seul pouvant être coché à la fois), il ne faut pas oublier la règle : ils doivent avoir le même name.

Pour appliquer l'apparance Bootstrap sur un bouton radio, on applique la classe *radio*é

Exemple de 2 boutons radio :

  <input class="radio" type="radio" name="choixFruits" id="fraises">
  <label for="fraises">
    Fraises
  </label>

  <input class="radio" type="radio" name="choixFruits" id="pommes">
  <label for="pommes">
    Pommes
  </label>

Pour assurer que le libellé soit bien affiché à coté du bouton, il est recommandé de les inclure dans un bloc ayant la classe form-field.

<div class="form-field">
  <input class="radio" type="radio" name="choixFruits" id="fraises">
  <label for="fraises">
    Fraises
  </label>
</div>

Boutons à choix unique

Parfois on offre à l'utilisateur des boutons en guise de choix.

Exemple sur le site de Apple :

Pour ce faire :

1. On crée un libellé ayant la classe btn-check et les classes de style voulues
2. Dans le libellé, on crée un champ de type radio
3. On ajoute ensuite le texte voulu comme libellé de bouton

<label class="btn-check btn-outline theme-primary">
  <input type="radio" name="options">
  Standard display
</label>

Utiliser une grille

Pour la mise en page d'un formulaire, ne pas hésiter d'utiliser une grille et ainsi faciliter le positionnement des éléments les uns par rapport aux autres.

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name">
  </div>
</div>

Switch (interrupteur)

Les interrupteurs permettent d'activer / désactiver un choix.

Pour y arriver avec Bootstrap :

1. créer un champ checkbox
2. insérer le checkbox dans un parent ayant la classe *switch

exemple :

<div class="switch">
  <input type="checkbox" role="switch" switch>
</div>

Input group

Un Input group permet de regrouper le libellé dans le champ et ainsi avoir un élément visuel encore plus clair.

Pour ce faire :

1. On crée un bloc parent ayant la classe input-group
2. On crée un libellé enfant avec la classe input-group-text
3. On crée un champ enfant abec la classe form-control

<div class="input-group">
  <label for="telephone" class="input-group-text">(418)</label>
  <input type="text" class="form-control" id="telephone">
</div>

Boutons

Les boutons d'un formulaire sont soit un lien cliquable ou une balise button :

• Lien cliquable (a) : quand le bouton doit rediriger l'utilisateur ailleurs
• button : quand le bouton déclenche un traitement

Rappel

La balise button a 3 types possibles :

• type=submit : pour soumettre un formulaire à un serveur de traitement
• type=reset : pour réinitialiser le formulaire dans lequel le bouton se trouve
• type=button : pour exécuter un traitement personnalisé avec un script

Les classes boutstrap de style pour les boutons sont nombreuses et peuvent être consultées ici : https://getbootstrap.com/docs/6.0/components/button/

Un bouton simple :

<button type="button" class="btn-text theme-primary">Enregistrer</button>