Nous allons apprendre dans cette leçon à créer toutes sortes de formulaires avec Bootstrap 5.
Pour suivre correctement ce cours, il est préférable de maîtriser un tant soit peu la création d’un formulaire en HTML.
Les classes, attributs et balises que nous allons voir dans cette leçon :
Les attributs :
- for
- id
- name
- rows
- type
- value
- checked
- placeholder
- disabled
- readonly
- step=
Les classes :
- form-label
- form-control
- form-check
- form-select
- form-range
- form-check-inline
- form-floating
- input-group
- input-group-text
- g-*
Les balises :
- <form>
- <label>
- <textarea>
- <button>
- <select>
Créer un formulaire basique avec Bootstrap 5
Pour commencer, nous allons voir comment créer un formulaire somme toute assez basique, mais qui va nous permettre de voir les principales classes et attributs nécessaires à la création d’un formulaire avec Bootstrap 5.
On débute en déclarant le formulaire avec la balise <form> et enchaînons sur l’élément <label> et <input>, les deux seront reliés ensemble par une id.
A noter que comme le formulaire va comporter plusieurs sections différentes (email, contenu et envoi) nous allons placer chacun d’entre eux dans une division <div>
L’identification (id) sur le <label> sera placée avec l’attribut for tandis que celui de l’<input>sera placé avec l’attribut id. Les deux valeurs doivent bien entendu être identiques.
Pour mettre en forme l’élément <label> on va utiliser la classe form-label.
Pour mettre en forme l’élément <input> on va utiliser la classe form-control.
Ces classes vont permettre de donner du style avec des marges a notre formulaire.
Nous allons aussi utiliser l’attribut placeholder= »* » pour donner un aperçu des données à remplir.
Voyons ce que ça donne jusqu’ici.
Bien, maintenant créons une autre division <div> pour y placer la section « contenu » du formulaire. On va rajouter une petite marge externe haute pour bien les séparer avec la classe mt-2.
Ajoutons l’élément <label> avec comme ci-dessus, l’attribut for et la classe form-label.
Nous devons ensuite placer l’élément dans lequel vos lecteurs pourront placer leurs commentaires. Pour ce faire, nous allons utiliser l’élément <textarea> ,la classe form-control et donner un id identique a la classe for de l’élément <label> comme avec l’élément input.
Un point intéressant est la possibilité de donner à l’élément <textarea> une hauteur avec la classe rows= »* ».
Dernière étape, la création du bouton permettant d’envoyer les commentaires.
Deux choix s’offrent à nous :
- Utiliser l’élément <input>.
- Utiliser l’élément <button>.
Envoyer les commentaires avec l’élément <input>.
Avec l’élément <input> notre bouton aura moins de style. Il possédera l’attribut type avec la valeur submit (soumettre) et l’attribut value qui affichera le texte que vous souhaitez mettre dans le bouton, dans notre exemple cette valeur sera « envoyer ».
Comme pour les deux sections précédentes, cette troisième section sera elle aussi placée dans une division <div>.
Le code complet :
Il est possible de donner un peu de style a notre élément en lui rajoutant par exemple une couleur de fond bleu et un texte blanc.
Envoyer les commentaires avec l’élément <button>.
L’élément <button> est quant à lui, déjà en partie stylisé (voir la leçon: créer des boutons avec Bootstrap 5).
Ce dernier intègre l’attribut type avec la valeur submit, mais ne nécessite pas l’attribut value.
Le code complet :
Créer un formulaire de connexion avec Bootstrap 5
Notre formulaire de connexion va comprendre :
- Un champ email.
- Un champ mot de passe.
- Un bouton à cocher « enregistrer ».
- Un bouton connexion.
Par rapport au formulaire précèdent nous allons avoir plusieurs changements.
L’attribut name va servir à identifier et gérer les données avec un langage serveur comme PHP par exemple.
Voir la liste des cours en ligne pour maîtriser le PHP.
Un des attributs type va prendre la valeur password, cette valeur permet notamment de cacher la saisie de votre mot de passe avec des astérisques.
Attardons-nous maintenant sur la case à cocher qui permet de mémoriser le mot de passe.
Ce champ se crée avec les classes :
- form-check placé dans la division <div> qui contient le champ.
- form-check-label placée dans l’élément <label>.
- form-check-input placée dans l’élément <input>.
<div class= »form-check mb-3″>
<label class= »form-check-label« >
<input class= »form-check-input » type= »checkbox » name= »remember« > Se souvenir
</label>
</div>
Le code complet :
Créer un formulaire avec des éléments à sélectionner
Pour insérer des éléments à sélectionner dans un formulaire nous allons utiliser les balises <select> accompagné de la classe form-select pour lui donner un certain style et la balise <option>
La première liste de sélection du formulaire permet de sélectionner qu’un seul choix en même temps alors que le deuxième permet d’en choisir plusieurs.
Après avoir commencé la création de notre formulaire…
<form>
= »selection1″ class= »form-label« >Choix unique:
…on place l’élément <select> pour constituer notre première liste de sélection…
<select class= »form-select » id= »selelection1″ name= »liste1″>
… et on insère les différentes options disponibles avec la balise <option>.
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
A la suite de cette première liste de sélection, nous allons insérer la seconde, celle qui permet des choix multiples. L’unique différence entre les deux est l’ajout de l’attribut multiple a la balise <select>.
<select multiple class= »form-select » id= »selection2″ name= »liste2″>
Le code complet :
Placer les éléments d’un formulaire côte à côte et les centrer verticalement
Pour placer les éléments d’un formulaire sur une même ligne, il suffit de créer une rangée (row) et des colonnes (col) dans lesquelles on va placer nos éléments.
Voir la leçon : Comment créer des rangées et des colonnes avec Bootstrap 5 ?
Pour centrer verticalement les éléments d’un formulaire on utilise la classe align-items-center.
Voir la leçon : Comment aligner verticalement et horizontalement des colonnes avec Bootstrap 5 ?
Comment désactiver un champ de formulaire ?
Pour désactiver un champ de formulaire, on utilise au choix les attributs :
disabled ou readonly.
Créer un formulaire avec des cases à cocher de style Radio
On a déjà vu comment créer des cases à cocher classique dans la section de ce cours Créer un formulaire de connexion avec Bootstrap 5.
Voyons maintenant comment transformer ces cases en case radio.
C’est très simple, il suffit de donner à l’attribut type la valeur radio en lieu et place de la valeur checkbox.
Case classique :
<input class= »form-check-input » type= »checkbox » name= »cocher1″ id= »casecheck »>
Case Radio
<input class= »form-check-input » type= »radio » name= »cocher1″ id= »casecheck »>
Enfin, l’on peut cocher une case par défaut, en ajoutant l’attribut checked.
Créer un formulaire avec des cases à cocher de style "Commutateur à bascule"
Là aussi Bootstrap nous facilite grandement la tâche, il suffit de changer la classe form-check placée sur les divisions <div> par la classe form-switch que l’on place sur chacune des divisions.
Créer un formulaire avec des points coulissants
Pour créer un formulaire avec des points coulissants nous allons utiliser la classe form-range sur la balise <input>.
Par défaut, le point coulisse par palier de 1, il est possible d’augmenter l’incrémentation en le faisant coulisser de plusieurs paliers à la fois en rajoutant à la balise <input> l’attribut step= »*« .
Exemple pour un palier de 10 en 10 :
<input type= »range » class= »form-range » id= »coulissant1″ step= »10« >
Par défaut, la valeur minimale est 0 et la valeur maximale est 100. Ces valeurs peuvent être modifiées en utilisant l’attribut min et/ou max.
<input type= »range » class= »form-range » id= »coulissant1″ min= »0 » max= »4« >
Aligner sur une même ligne toutes les cases à cocher d’un formulaire
Pour regrouper les cases checkbox ou radios sur la même ligne horizontale, il suffit de rajouter la classe form-check-inline à tous les éléments comprenant la classe form-check.
<div class= »form-check form-check-inline« >
Exemple :
Rajouter des éléments à côté d’un champ de données
Bootstrap offre la possibilité de rajouter des éléments à droite ou à gauche d’un champ de données tel que les champs :
- input
- textearea
- select
Cela peut être utile pour :
- Rajouter du style a un formulaire.
- Donner des indications pour aider au remplissage du formulaire.
Pour ce faire, nous allons utiliser la classe input-group sur chacune des divisions <div> concernaient par l’ajout d’éléments à côté du champ de données.
<div class= »input-group« >
Ensuite nous allons rajouter une balise <span> avec la classe input-group-text pour lui donner un style prédéfini par Bootstrap (couleur de fond, marge) suivi de l’élément, ici le sigle @.
<span class= »input-group-text« >@</span>
Pour finir, nous plaçons notre champ de donnée.
<input type= »text » class= »form-control » placeholder= »Nom d’utilisateur »>
Pour placer l’élément à droite il suffit de le placer après le champ de données.
On peut aussi placer l’élément entre deux champs de données…
…ou ajouter plusieurs éléments.
On a vu jusqu’ici des éléments de type texte, ajoutons maintenant des boutons en remplaçant la balise <span> par la balise <button>.
Finissons par un dernier exemple en plaçant un bouton avec menu déroulant.
Voir la leçon : Comment créer des menus déroulants avec Bootstrap ?
Créer un formulaire avec des effets de flottement
Il est possible de créer des effets de flottement lorsqu’on clique sur un des champs d’un formulaire en ajoutant la classe form-floating sur chaque division <div> contenant les champs sur lequel nous souhaitons créer un effet flottant.
Création d’un formulaire complexe avec Bootstrap 5
Finissons cette leçon avec la création d’un formulaire complexe.
Ce formulaire va intégrer des Breakpoints pour offrir une disposition différente selon la taille d’écran.
Nous allons aussi utiliser un gutter (g-*) pour créer des marges et espacer tous les éléments du formulaire de façon uniforme.
Voir la leçon : Bootstrap 5, comment espacer les éléments avec un gutter (goutière) ?
