Bootstrap nous offre de nombreuses classes pour nous permettre de structurer nos formulaires et d’ajouter des styles aux différents éléments des formulaires.
Styliser les champs de formulaire
Bootstrap applique un display : block à la plupart des éléments de formulaire par défaut, ce qui signifie que la plupart des éléments occuperont leur propre ligne.
On va utiliser la classe .form-control pour mettre en forme la majorité des champs de formulaire et notamment les éléments input, select et textarea.
Nous allons également utiliser une classe .form-group pour grouper des label avec le champ de formulaire correspondant. Nous reparlerons de cette classe plus tard.
Note : on utilisera la classe .form-control-file plutôt que .form-control avec un input type = "file" (champ servant à un envoi de fichier). De même, on utilisera .form-control-range avec un input type = "range" (champ d’intervalle).
On va ensuite pouvoir modifier la taille de nos champs de formulaire et des textes en utilisant les classes .form-control-sm (textes plus petits) et .form-control.lg (textess plus grands).
Dans le cas où on définit certains champs de formulaire comme non modifiables (avec l’attribut readonly) comme cela pourrait être le cas dans le cadre d’un formulaire de connexion, on peut utiliser la classe Bootstrap .form-control-plaintextpour que le texte de l’input apparaisse comme texte plein.
Notices (blocs d’aide)
Des notices ou blocs d’aide peuvent être ajoutés sous nos éléments de formulaire grâce à la classe .form-text.
Structurer un formulaire avec Bootstrap
Pour structurer un formulaire et grouper différents éléments nous allons pouvoir utiliser la classe .form-group avec un élément conteneur générique comme un divou encore avec un élément fieldset par exemple.
Généralement, nous allons vouloir grouper un label avec son input comme ci-dessous :
Si on souhaite créer une structure plus complexe pour notre formulaire, on peut également utiliser le système des grilles Bootstrap pour gérer la disposition des éléments de formulaire. Par ailleurs, notez que Bootstrap dispose d’une classe .form-row qu’on va pouvoir utiliser à la place de .row pour nos formulaires et qui applique un design plus compact qu’une ligne de formulaire classique.
On va encore pouvoir placer un label et un input côte-à-côte et aligner les différents label et input entre eux en utilisant le système des grilles et .form-group. On rajoutera ici en plus une classe .col-form-label afin d’aligner les label et leur inputcorrespondant.
Notez que des classes .col-form-label-sm et .col-form-label-lg permettent de faire en sorte que les label possèdent la même taille que des éléments de formulaire définis avec .form-control-sm ou .form-control-lg.
Styliser les cases à cocher et les boutons radio
On va utiliser des classes différentes pour styliser les input type = "checkbox" et input type = "radio" (cases à cocher et boutons radio) de nos formulaires.
On va déjà pouvoir utiliser une classe .form-check à la place de .form-group pour grouper un input avec son label.
On va également ajouter une classe .form-check-input à chacun de nos input type = "checkbox" et input type = "radio" et une classe .form-check-label aux éléments labelcorrespondants.
Formulaires en ligne
Nous allons pouvoir utiliser la classe .form-inline avec notre élément form pour afficher des groupes d’éléments de formulaires label, input, etc. côte-à-côte, c’est-à-dire sur la même ligne). Cette classe applique les styles suivants :
- Les éléments de formulaire reçoivent un
display: flex; - Les groupes d’input et les champs de formulaire sont définis avec
width: autoà la place duwidth: 100%par défaut.
Notez qu’on peut également utiliser la classe .form-check-inline pour placer des input type="checkbox" et input type="radio" côte-à-côte.
Valider les données des formulaires avec Bootstrap
Nous allons pouvoir utiliser Bootstrap et ses composantes pour effectuer une validation de nos formulaires HTML côté client. Cette validation ne devrait en aucun cas se substituer à une validation puissante effectuée côté serveur.
En effet, la validation côté client va plutôt servir à traiter les erreurs d’utilisateurs négligents / étourdis et leur fournir des indications sur les données attendues mais n’est pas là pour prévenir certains comportements dangereux d’utilisateurs mal intentionnés.
Côté client, Bootstrap s’appuie sur les deux pseudo-classes CSS :invalid et :validpour la validation des formulaires. Ces deux pseudo-classes s’appliquent aux éléments input, select et textarea.
Bootstrap étend les styles des pseudo-classes :invalid et :valid à la classe .was-validated.
Si on souhaite fournir des informations sur la validité des champs avant qu’un utilisateur ait envoyé le formulaire, on ajoutera la classe .was-validated à l’élément form.
Si on souhaite fournir des informations sur la validité des champs après l’envoi du formulaire, on ajoutera la classe .needs-validation à l’élément form. Les champs de saisie auront une bordure verte ou rouge selon que les données soient valides ou invalides.
On va également pouvoir ajouter un message personnalisé sous chaque champ, en indiquant par exemple si les données sont valides ou un message d’aide dans le cas où les données sont invalides.
Pour cela, il va déjà falloir ajouter un attribut novalidate à notre élément form. On va ensuite utiliser les classes Bootstrap .valid-feedback et .invalid-feedback avec chaque champ pour ajouter des messages qui seront affichés dans le cas où le champ a été bien rempli ou mal rempli.
Les groupes d’input
Bootstrap va nous permettre de personnaliser nos formulaires en nous donnant la possibilité de « grouper » des éléments de formulaires ensemble. En pratique, nous allons pouvoir ajouter du texte, des boutons, etc. de chaque côté de nos différents éléments input, textarea ou select pour donner des précisions sur les données attendues à nos utilisateurs ou simplement pour rendre nos formulaires plus esthétiques.
Pour cela, nous allons devoir utiliser la classe Bootstrap .input-group que l’on va généralement appliquer à un div qui contiendra un élément de formulaire ainsi que le(s) texte(s) et / ou le(s) bouton(s) qu’on va vouloir grouper avec l’élément de formulaire.
Notez déjà que lorsqu’on voudra ajouter du texte de part et d’autre d’un élément de formulaire au sein d’un groupe d’input, nous utiliserons la classe .input-group-text qu’on appliquera à l’élément contenant le texte.
Pour décider de l’emplacement du texte ou du bouton, nous utiliserons cette fois-ci les classes .input-group-prepend pour placer le texte ou le bouton avant l’élément de formulaire et .input-group-append pour placer le texte ou le bouton après l’élément de formulaire.
Bien évidemment, nous allons pouvoir accoler plusieurs textes et boutons à la suite autour de nos éléments de formulaire. Regardez plutôt l’exemple suivant :
Nous allons pouvoir gérer la taille de nos groupes d’input en appliquant les classes input-group-sm (petite taille) et input-group-lg (grande taille) directement aux éléments conteneurs possédant la classe .input-group.
Nous allons également pouvoir accoler des input type="checkbox" et input type="radio" à nos input type="text" pour créer des groupes d’input à la place d’un simple texte. Pour cela, nous allons simplement préciser nos éléments HTML à la place du texte dans notre groupe d’input.
Finalement, nous allons pouvoir utiliser des boutons pour créer nos groupes d’input. Pour cela, nous allons simplement placer nos éléments HTML button et input à l’intérieur d’un élément possédant une classe .input-group.
Notez également pour votre information que l’on va tout à fait pouvoir intégrer des boutons avec dropdown (défilement) dans nos groupes d’input en respectant les mêmes règles que précédemment. Cependant, en pratique, cela se fera rarement car l’utilité sera souvent très marginale.