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 fortandis 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’attributplaceholder= »* » 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-controlet 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 valuequi 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.
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-selectpour 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…
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>.
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.
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= »*« .
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 classeinput-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 @.
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.