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.
Code :
See the Pen
Bootstrap 3.5.1 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 3.5.1 by Pierre (@pierregiraud)
on CodePen.
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).
See the Pen
Bootstrap 3.5.2 by Pierre (@pierregiraud)
on CodePen.
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).
See the Pen
Bootstrap 3.5.3 by Pierre (@pierregiraud)
on CodePen.
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-plaintext pour que le texte de l’input apparaisse comme texte plein.
See the Pen
Bootstrap 3.5.4 by Pierre (@pierregiraud)
on CodePen.
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.
See the Pen
Bootstrap 3.5.5 by Pierre (@pierregiraud)
on CodePen.
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 div ou encore avec un élément fieldset par exemple.
Généralement, nous allons vouloir grouper un label avec son input comme ci-dessous :
Code :
See the Pen
Bootstrap 3.5.6 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 3.5.6 by Pierre (@pierregiraud)
on CodePen.
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.
Code :
See the Pen
Bootstrap 3.5.7 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 3.5.7 by Pierre (@pierregiraud)
on CodePen.
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 input correspondant.
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.
Code :
See the Pen
Bootstrap 3.5.8 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 3.5.8 by Pierre (@pierregiraud)
on CodePen.
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 label correspondants.
See the Pen
Bootstrap 3.5.x by Pierre (@pierregiraud)
on CodePen.
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.
Code :
See the Pen
Bootstrap 3.5.9 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 3.5.9 by Pierre (@pierregiraud)
on CodePen.
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 :valid pour 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.
Code :
See the Pen
Bootstrap 3.5.10 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 3.5.10 by Pierre (@pierregiraud)
on CodePen.
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 :
Code :
See the Pen
Bootstrap 3.5.11 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 3.5.11 by Pierre (@pierregiraud)
on CodePen.
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.
Code :
See the Pen
Bootstrap 3.5.12 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 3.5.12 by Pierre (@pierregiraud)
on CodePen.
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.
Code :
See the Pen
Bootstrap 3.5.13 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 3.5.13 by Pierre (@pierregiraud)
on CodePen.
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.
Code:
See the Pen
Bootstrap 3.5.14 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 3.5.14 by Pierre (@pierregiraud)
on CodePen.
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.
