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

Menu Bootstrap

Champs input

Les champs simples fonctionnent avec 2 classes :

• Classe pour les champs de type texte : form-control
• Classe pour les libellés : 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">

Liste déroulante

Les listes déroulantes de base n'ont besoin que d'une classe : form-select

<select class="form-select">
  <option selected>Faites un choix</option>
  <option value="francais">Français</option>
  <option value="anglais">Anglais</option>
  <option value="espagnol">Espagnol</option>
</select>

Cases à cocher

Pour créer une case à cocher:

• créer un parent de classe form-check pour les styles de base
• créer le champ input avec la classe form-check-input
• créer le libellé avec la classe form-check-label

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="optGlacage" id="glacage">
  <label class="form-check-label" for="glacage">
    Ajouter du glaçage à la vanille
  </label>
</div>

Boutons radio

Boutons radio

La même règle s'applique pour les boutons radio mutuellementr exclusifs : ils doivent avoir le même name.

Ensuite, on :

• crée un parent de classe form-check pour les styles de base
• crée le champ input avec la classe form-check-input
• crée le libellé avec la classe form-check-label

Exemple de 2 boutons radio :

html

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

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>

Boutons

L'aide sur les boutons se trouve dans les composants car on crée souvent des boutons sans formulaire.

Pour créer un bouton :

1. Utiliser la balise <button>
2. Styles de base avec la classe btn
3. Couleur du bouton avec les classes débutant par btn- suivi d'une couleur Bootstrap

Exemples :

boutons pleins

boutons contour