Bootstrap Formulaire

BTS SIO1 BLOC 1 2022-2023
BOOTSTRAP FORMULAIRES
En annexe exemples_formulaires avec 16 exemples
A La structure de base
1. Le formulaire Bootstrap
Pour insérer un formulaire, nous allons utiliser une grille Bootstrap très simple, avec
un conteneur <div class="container">, une ligne <div class="row"> et une
colonne <div class="col">.
Le formulaire <form> utilise l’attribut role="form".
Chaque élément du formulaire sera placé dans une boîte <div> ayant une classe
spécifique.
Par exemple, les éléments <input> de saisie seront placés dans une
boîte <div> avec la classe .form-group et les cases à cocher seront placées dans une
boîte <div> avec la classe .form-check .
Les éléments du formulaire auront des classes Bootstrap dédiées : .form-
control, .form-check-input ...
Voici un exemple simple d’un formulaire, avec deux champs de saisie, une case à
cocher et un bouton de validation :
<form role="form">
<div class="form-group">
<label for="lemail">Adresse mail</label>
<input type="email" class="form-control" id="lemail" placeholder="Indiquez votre adresse mail">
</div>
<label for="pw">Mot de passe</label>
<input type="password" class="form-control" id="pw" placeholder="Indiquez votre mot de passe">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="accepter">
<label class="form-check-label" for="accepter"> Accepter les conditions</label>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
Le sélecteur .form-group : pour grouper des label avec le champ de formulaire
correspondant.
.form-group {
margin-bottom: 1rem;
}
Le sélecteur .form-control : pour mettre en forme la majorité des champs de formulaire

et notamment les éléments input, select et textarea.
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
}
2. La hauteur des champs

Bootstrap nous offre la possibilité de déterminer la hauteur des champs, avec les
classes .form-control-lg et .form-control-sm.
Voici le code de cet exemple :
<form role="form">
<input type="email" class="form-control" id="lemail" placeholder="Hauteur par défaut">
</div>
<input type="email" class="form-control form-control-lg" id="lemail"
placeholder="Grande hauteur">
</div>
<input type="email" class="form-control form-control-sm" id="lemail" placeholder="Petite hauteur">
</div>
</form>
Voici l’affichage obtenu :
2
Voici les propriétés CSS des deux classes pour le calcul de la hauteur des champs :
● .form-control-lg : height: calc(2.875rem + 2px);.
● .form-control-sm : height: calc(1.8125rem + 2px);.
Pour avoir des libellés qui soient adaptés à ces hauteurs de champ, utilisez les
classes .col-form-label-lg avec .form-control-lg et .col-form-label-sm avec .form-
control-sm, pour les éléments <label> et <legend>.
Pour avoir une hauteur qui s’adapte selon le type, il faudrait rajouter le test
@media (min-width : 992px) {….pour lg par exemple
3. Les champs en lecture seule

Si vous avez besoin d’afficher des champs en lecture seule, utilisez l’attribut
standard readonly. Cet attribut applique la mise en forme standard des navigateurs ;
pour avoir la mise en forme Bootstrap, utilisez la classe .form-control-plaintext dans
le champ concerné.
Voici le code de cet exemple simple, où la classe est appliquée sur le champ du mot
de passe :
<form role="form">
</div>
<label for="mdp">Mot de passe</label>
<input type="text" readonly class="form-control-plaintext" id="mdp"
placeholder="Mot de passe">
</div>
</form>
3
Voici les propriétés de la classe .form-control-plaintext :
.form-control-plaintext {
display: block;
width: 100%;
padding-top: .375rem;
padding-bottom: .375rem;
margin-bottom: 0;
line-height: 1.5;
background-color: transparent;
border: solid transparent;
border-width: 1px 0;
}
B Les cases à cocher et les boutons radio

1. Les éléments standards
Les cases à cocher et les boutons radio s’insèrent dans une boîte avec une classe
dédiée : <div class="form-check">, avec l’élément HTML standard des formulaires,
mais avec à nouveau une classe dédiée : <input class="form-check-input">.
Voici le code de cet exemple simple :
<form role="form">
<p>Choisissez une ou plusieurs options</p>
<input class="form-check-input" type="checkbox" value="" id="choix1">
<label class="form-check-label"
for="choix1">Choix 1</label>
</div>
<label class="form-check-label"
for="choix2">Choix 2</label>
</div>
<label class="form-check-label" for="choix3">Choix 3</label>
</div>
<p> </p>
<p>Choisissez une option</p>
<input class="form-check-input" type="radio" name="btradio" id="choixa" value="choixa">
<label class="form-check-label" for="choixa">Choix A</label>
</div>
4
<input class="form-check-input" type="radio" name="btradio" id="choixb" value="choixb">
<label class="form-check-label" for="choixb">Choix B</label>
</div>
<input class="form-check-input" type="radio" name="btradio" id="choixc" value="choixc">
<label class="form-check-label" for="choixc">Choix C</label>
</div>
</form>
2. Les éléments en ligne

Vous pouvez afficher ces éléments en ligne, les uns à côté des autres avec la classe
supplémentaire .form-check-inline qui s’ajoute à la boîte <div> qui contient les cases
à cocher et les boutons radio.
...
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value=""
id="choix1">
<label class="form-check-label" for="choix1">Choix 1
</label>
</div>
...
C Les mises en page des formulaires

5
1. La mise en page standard
Nous l’avons déjà utilisé de nombreuses fois, c’est la classe .form-group qui permet
de mettre en page de manière standard les formulaires Bootstrap. Cette classe
s’insère dans chaque boîte <div> contenant un élément de formulaire.
Le dossier pour cet exemple est Formulaires-06.
Voici un exemple vide d’éléments de formulaire :
<form role="form">
...
</div>
...
</div>
</form>
Les éléments de formulaire apparaissent les uns sous les autres dans cette mise en
page standard.
2. Utiliser une grille standard
Pour avoir des formulaires plus attractifs, vous pouvez placer les éléments dans une
grille Bootstrap, elle-même placée dans le formulaire.
Voici l’exemple d’un formulaire comportant deux champs de saisie et un bouton
d’envoi.
<div class="container">
<div class="row">
<div class="col">
<form role="form">
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
</div>
</div>
</form>
</div>
</div>
</div>
Le formulaire contient une première ligne, <div class="row">, contenant deux

colonnes, <div class="col">. Les deux colonnes contiennent respectivement les deux
champs de saisie. La deuxième ligne ne contient qu’une colonne qui affiche le
bouton d’envoi du formulaire.
3. Utiliser une grille de formulaire

Vous pouvez aussi utiliser une grille qui soit bien adaptée aux formulaires, avec la
classe .form-row à la place de la classe .row.
6
<div class="row">
<div class="col">
<form role="form">
<div class="form-row">
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class="col">
</div>
</div>
</form>
</div>
</div>
</div>
Voici les propriétés de la classe .form-row :

.form-row {
display: flex;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px;
}
4. Utiliser une grille complexe
Vous pouvez bien sûr combiner ces mises en forme, avec les classes .form-
row, .form-group et .col-XX-YY, pour placer vos formulaires dans des grilles
complexes.
Voici un exemple d’utilisation d’une grille complexe :
<div class="row">
<div class="col">
<form>
<div class="form-group col-md-6">
<label for="prenom">Prénom</label>
<input type="text" class="form-control" id="prenom" placeholder="Votre prénom">
</div>
<label for="nom">Nom</label>
<input type="text" class="form-control" id="nom" placeholder="Votre nom">
</div>
7
</div>
<label for="adresse">Addresse</label>
<input type="text" class="form-control" id="adresse" placeholder="12 rue Machin">
</div>
<label for="ville">Ville</label>
<input type="text" class="form-control" id="ville">
</div>
<label for="cp">Code postal</label>
<input type="text" class="form-control" id="cp">
</div>
<label for="pays">Pays</label>
<select id="pays" class="form-control">
<option selected>Choisissez...</option>
<option>A... </option>
<option>B... </option>
</select>
</div>
</div>
<button type="submit" class="btn btn-rimary">Envoyez</button>
</form>
</div>
</div>
</div>
Voilà l’affichage obtenu sur un écran large :
Voilà l’affichage obtenu sur un écran plus petit :
8
5. Les formulaires en colonnes
Toujours à l’aide de la grille Bootstrap, vous pouvez créer des formulaires en

colonnes. La première colonne contiendra le libellé des champs, la deuxième
colonne contiendra les champs.
<form>
<div class="form-group row">
<label for="nom" class="col-sm-2
col-form-label">Nom</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nom">
</div>
</div>
<label for="prenom" class="col-sm-2 col-form-label">Prénom</label>
<input type="text" class="form-control" id="prenom">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Choix unique</legend>
<input class="form-check-input" type="radio" name="choix" id="choix1" value="choix1" checked>
</div>
<input class="form-check-input" type="radio" name="choix" id="choix2" value="choix2">
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="choix" id="choix3" value="choix3" disabled>
</div>
</div>
</div>
</fieldset>
<div class="col-sm-2">Validation</div>
<input class="form-check-input"type="checkbox" id="validation">
<label class="form-check-label" for="validation">Accepter</label>
</div>
</div>
</div>
</div>
</div>
</form>
Voilà l’affichage obtenu sur un écran large :
Voilà l’affichage obtenu sur un écran plus petit :

9
6. Les éléments en ligne
Vous pouvez afficher les libellés et les champs sur une même ligne afin de gagner de
la place. Pour ce faire, utilisez la classe .form-inline dans l’élément <form>.
Voici un exemple simple :
<div class="row">
<div class="col">
<form class="form-inline">
<label for="nom" class="sr-only">Nom</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="nom" placeholder="Votre nom">
<label for="prenom" class="sr-only">Prénom</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="prenom" placeholder="Votre prénom">
<button type="submit" class="btn btn-primary mb-2">Envoyer</button>
</form>
</div>
</div>
</div>
Voici l’affichage obtenu sur un écran large :
Voici l’affichage obtenu sur un petit écran :
● La classe .form-inline est bien appliquée à l’élément <form> pour indiquer que
les éléments de celui-ci doivent s’afficher en ligne, les uns à côté des autres.
10
● Les trois éléments du formulaire ont tous la classe .mb-2 pour toujours avoir
une marge basse supplémentaire. Ainsi, sur petit écran, les éléments sont
espacés verticalement.
● Seuls les deux premiers éléments ont une marge supplémentaire à droite,
pour les petits écrans et supérieurs, afin qu’ils ne se touchent pas sur tous les
écrans. Le dernier élément n’ayant pas d’autres éléments sur sa droite, il n’est
pas nécessaire de lui appliquer cette marge supplémentaire.
D Des éléments de mise en forme

1. Masquer les étiquettes
Les étiquettes des champs sont des éléments indispensables dans la conception des
formulaires. Pour l’accessibilité des sites web, ils doivent être présents. Mais vous
pouvez parfaitement masquer automatiquement les étiquettes pour les formulaires
dédiés aux écrans standards, non optimisés pour les personnes en situation de
handicap. Pour masquer les étiquettes, utilisez la classe .sr-only, sr pour Screen
Reader.
<form class="form-inline">
<label for="nom" class="sr-only">Nom</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="nom" placeholder="Votre nom">
<label for="prenom" class="sr-only">Prénom</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="prenom" placeholder="Votre prénom">
<button type="submit" class="btn btn-primary mb-2">Envoyer
</button>
</form>
2. L’aide contextuelle
En plus de l’aide affichée dans le champ avec l’attribut placeholder, vous pouvez
afficher une aide contextuelle pour chaque champ que vous souhaitez. Pour ce faire,
utilisez par exemple l’élément <small> avec les classes .form-text et .text-muted.
<form role="form">
<input type="email" class="form-control"
id="lemail" placeholder="Indiquez votre adresse mail">
<small id="lemail" class="form-text text-muted">
Saisissez dans ce champ votre adresse mail, sans oublier le caractère @.
</small>
</div>
</form>
11
L’aide contextuelle placée dans l’élément <small> est liée au champ <input> par
l’attribut id.
3. La validation des formulaires
Vous avez la possibilité de vérifier, de valider les saisies effectuées dans les champs
des formulaires, à l’aide de scripts JavaScript, PHP ou autres. Bootstrap propose des
classes dédiées à l’affichage des champs valides avec .is-valid, et non valides
avec .is-invalid.
Les champs valides sont alors encadrés d’une bordure verte et les champs non
valides sont encadrés d’une bordure rouge.
4. Les cases à cocher et les boutons radio personnalisés
Bootstrap vous propose une mise en forme des cases à cocher et des boutons radio
personnalisée qui remplace celle par défaut des navigateurs. Bootstrap utilise une
image au format SVG.
Pour les cases à cocher, la boîte qui les contient doit avoir ces deux
classes : <div class="custom-control custom-checkbox">. La case à cocher doit avoir
cette classe : <input class="custom-control-input" type="checkbox">, et l’étiquette
celle-ci : <label class="custom-control-label">.
Pour les boutons, la boîte qui les contient doit avoir ces deux classes
: <div class="custom-control custom-radio">. Le bouton radio et l’étiquette ont les
mêmes classes que les cases à cocher.
<form role="form">
<p>Choisissez une ou plusieurs options</p>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" value="" id="choix1">
<label class="custom-control-label" for="choix1">Choix 1</label>
</div>
</div>
</div>
<p> </p>
<p>Choisissez une option</p>
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" name="btradio" id="choixa" value="choixa">
<label class="custom-control-label" for="choixa">Choix A</label>
</div>
<input class="custom-control-input" type="radio" name="btradio" id="choixb" value="choixb">
<label class="custom-control-label" for="choixb">Choix B</label>
</div>
<input class="custom-control-input" type="radio" name="btradio" id="choixc" value="choixc">
<label class="custom-control-label" for="choixc">Choix C</label>
</div>
</form>
Voici l’affichage obtenu avec aucun élément sélectionné :
12
Voici l’affichage obtenu avec des éléments sélectionnés :
5. Les listes d’options

Bootstrap vous propose de personnaliser l’affichage des listes d’options de
l’élément <select> avec la classe dédiée .custom-select.
<form role="form">
<p>Choisissez une ville :</p>
<select class="custom-select">
<option value="venise">Venise</option>
<option value="paris">Paris</option>
<option value="londres">Londres</option>
<option value="madrid">Madrid</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Envoyer
</button>
</form>
13
Notez que les attributs multiple et size sont bien pris en compte.
6. La sélection de fichiers
L’élément de formulaire de sélection de fichiers peut être aussi personnalisé pour
s’adapter au design de Bootstrap. Pour ce faire, le conteneur du champ doit avoir la
classe <div class="custom-file">, le champ doit avoir la classe <input type="file"
class="custom-file-input"> et l’étiquette <label class="custom-file-label">.
<form role="form">
<div class="custom-file">
<input type="file" class="custom-file-input" id="fichier">
<label class="custom-file-label" for="fichier">Sélectionnez un
fichier</label> </div>
<button type="submit" class="btn btn-primary mt-2">Envoyer</button>
</form>
E Ajouter des informations aux champs

1. L’objectif
Bootstrap donne la possibilité d’ajouter des éléments d’information avant ou après
les champs de saisie. Ces informations peuvent être de tout ordre : des signes
monétaires, des consignes courtes, des symboles, des boutons...
2. Ajouter des informations supplémentaires
Dans cet exemple, nous allons ajouter des informations supplémentaires simples aux
champs de saisie. Ces éléments d’information seront placés soit à gauche, soit à
droite des champs ou soit des deux côtés.
14
<form role="form">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="prenom">Prénom</span>
</div>
<input type="text" class="form-control" placeholder="Votre prénom" aria-label="prenom" aria-
describedby="prenom">
</div>
<span class="input-group-text" id="nom">Nom</span>
</div>
<input type="text" class="form-control" placeholder="Votre nom" aria-label="nom" aria-describedby="nom">
</div>
<input type="text" class="form-control" placeholder="Votre adresse mail" aria-label="Adresse mail" aria-
describedby="adresse-mail">
<div class="input-group-append">
<span class="input-group-text" id="adresse-mail">prenom.nom@exemple.fr</span>
</div>
</div>
<label for="basic-url">URL de votre site web</label>
<span class="input-group-text" id="site-web">https://www.exemple.com/</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="site-web">
</div>
<span class="input-group-text">€</span>
</div>
<input type="text" class="form-control" placeholder="Montant de l'inscription" aria-label="Inscription en euros">
<span class="input-group-text">.00</span>
</div>
</div>
<div class="input-group">
<span class="input-group-text">Informations<br>complémentaires</span>
</div>
<textarea class="form-control" aria-label="Informations complémentaires"></textarea>
</div>
</form>
Voyons comment sont insérées les informations supplémentaires. Ces informations

sont insérées dans une boîte <div> avec une classe spécifique qui indique si cette
information doit être affichée à gauche ou à droite.
● Pour un affichage à gauche, la classe se nomme .input-group-prepend.
15
● Pour un affichage à droite, la classe se nomme .input-group-append.
Le texte de l’information supplémentaire est inséré dans un
élément <span class="input-group-text" id="xxx">. Cet élément utilise la
classe .input-group-text et possède un id.
Vous pouvez afficher les champs avec trois hauteurs, avec des classes
spécifiques .input-group-XX, à placer dans le conteneur <div> :
● Petite hauteur : <div class="input-group input-group-sm">.
● Hauteur standard : <div class="input-group">.
● Grande hauteur : <div class="input-group input-group-lg">.
3. Les champs de saisie multiples
Bootstrap vous permet d’insérer plusieurs champs dans le même conteneur. Cela
vous permet de gagner de la place.
<form role="form">
<span class="input-group-text" id="">Prénom et nom</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
</form>
Dans le conteneur général, <div class="input-group">, nous avons successivement :

● L’information supplémentaire : <div class="input-group-prepend">.
● Le premier champ de saisie : <input type="text" class="form-control">.
● Le deuxième champ de saisie : <input type="text" class="form-control">.
●
4. Les informations supplémentaires multiples
Dans le premier exemple, nous avons placé des informations supplémentaires à
gauche et à droite du champ de saisie. Mais vous pouvez parfaitement placer
plusieurs informations supplémentaires du même côté.
<input type="text" class="form-control" aria-label="Montant en euros">
<span class="input-group-text">€</span>
16
<span class="input-group-text">Sans les centimes </span>
</div>
</div>
Dans le conteneur des informations supplémentaires, <div class="input-group-

append">, nous avons deux éléments <span> pour chaque information
supplémentaire.
5. Insérer des boutons
Vous pouvez insérer des boutons d’action à la place des informations

supplémentaires.
<div class="custom-file">
<input type="file" class="custom-file-input" id="fichier">
<label class="custom-file-label" for="fichier">Sélectionnez un
fichier</label>
</div>
<span class="input-group-text" id="">Fichier choisi</span>
</div>
</div>
Dans cet exemple, nous avons dans un premier temps le champ pour sélectionner
un fichier et son bouton associé, puis nous avons l’information supplémentaire.
17

Bootstrap Formulaire

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Bootstrap Formulaire

Transféré par

Droits d'auteur :

Formats disponibles

BTS SIO1 BLOC 1 2022-2023

En annexe exemples_formulaires avec 16 exemples

Le sélecteur .form-control : pour mettre en forme la majorité des champs de formulaire

2. La hauteur des champs

Voici l’affichage obtenu :

3. Les champs en lecture seule

Voici l’affichage obtenu :

B Les cases à cocher et les boutons radio

Voici l’affichage obtenu :

2. Les éléments en ligne

C Les mises en page des formulaires

Le formulaire contient une première ligne, <div class="row">, contenant deux

3. Utiliser une grille de formulaire

Voici l’affichage obtenu :

Voici les propriétés de la classe .form-row :

Voilà l’affichage obtenu sur un écran large :

Voilà l’affichage obtenu sur un écran plus petit :

Toujours à l’aide de la grille Bootstrap, vous pouvez créer des formulaires en

Voilà l’affichage obtenu sur un écran large :

Voilà l’affichage obtenu sur un écran plus petit :

Voici l’affichage obtenu sur un écran large :

Voici l’affichage obtenu sur un petit écran :

D Des éléments de mise en forme

Voici l’affichage obtenu avec aucun élément sélectionné :

5. Les listes d’options

E Ajouter des informations aux champs

Voyons comment sont insérées les informations supplémentaires. Ces informations

Dans le conteneur général, <div class="input-group">, nous avons successivement :

Dans le conteneur des informations supplémentaires, <div class="input-group-

Vous pouvez insérer des boutons d’action à la place des informations

Vous aimerez peut-être aussi