Editions ENI Livres | Vidéos | e-Formations
Les formulaires
L’objectif
Dans ce chapitre, nous allons étudier les styles CSS proposés par Bootstrap pour mettre en forme les formulaires et tous leurs éléments inclus : les champs de saisie, les cases à cocher, les boutons radio...
Avec de nombreux exemples, nous allons aussi étudier la mise en page des formulaires à l’aide de classes dédiées et avec les colonnes de la grille de Bootstrap.
La structure des formulaires
1. La structure de base
L’exemple à télécharger est dans le dossier 07-Formulaires-01.
Pour insérer un formulaire, vous allez utiliser une grille Bootstrap très simple, avec un conteneur <div class="container">, une ligne <div class="row"> et une colonne <div class="col">. Chacun de ces éléments utilise une classe Bootstrap dédiée que nous avons vues précédemment.
Le formulaire est placé dans un élément <form> possédant l’attribut role="form". Ensuite, chaque élément du formulaire est inséré dans une boîte <div>. Les éléments insérés ont des classes spécifiques pour leur mise en forme.
Voici le code HTML de cet exemple simple, avec deux champs de saisie, une case à cocher et un bouton de validation :
<div class="container">
<div class="row">
<div class="col">
<form role="form">
<div class="mb-3">
<label for="lemail" class="form-label">Adresse mail</label>
<input type="email" class="form-control" id="lemail"
placeholder= "Indiquez votre adresse mail">
<div id="emailText" class="form-text">Votre adresse mail ne sera
pas divulguée.</div>
</div>
<div class="mb-3">
<label for="pw" class="form-label">Mot...Les sélecteurs de choix
1. Les cases à cocher et les boutons radio standards
Les cases à cocher et les boutons radio s’insèrent dans une boîte avec la classe dédiée <div class="form-check">. Dans cette boîte, utilisez l’élément HTML standard des formulaires input, mais avec la classe dédiée <input class="form-check-input">. Pour les cases à cocher, utilisez le classique type="checkbox", et pour les boutons radio, le classique type="radio".
L’exemple à télécharger est dans le dossier 07-Formulaires-04.
Voici le code de cet exemple simple :
<form role="form">
<p>Choisissez une ou plusieurs options</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="choix1">
<label class="form-check-label" for="choix1">Choix 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="choix2">
<label class="form-check-label" for="choix2">Choix 2</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="choix3">
<label class="form-check-label" for="choix3">Choix 3</label>
</div>
<p> </p>
<p>Choisissez une option</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="btradio"
id="choixa" value="choixa">
<label class="form-check-label" for="choixa">Choix A</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="btradio"...Les champs de longue saisie
Vous pouvez proposer aux visiteurs de votre site de saisir des commentaires ou des appréciations longues dans des champs de saisie prévus à cet effet, avec le classique élément HTML textarea.
L’exemple à télécharger est dans le dossier 07-Formulaires-09. C’est la deuxième partie du formulaire, insérée dans une boîte <div>.
Pour l’élément label, vous associez la classe .form-label, et pour l’élément textarea, vous associez la classe .form-control, afin d’avoir une mise en forme Bootstrap.
Voici le code de cet exemple :
<div class="mt-3">
<label for="commentaire" class="form-label">Commentaire :</label>
<textarea class="form-control" id="commentaire" rows="3"></textarea>
</div> Voici l’affichage obtenu :
La sélection de fichiers
La sélection de fichiers sur l’ordinateur des internautes est une action très courante. Pour insérer un sélecteur de fichiers, il suffit d’utiliser un élément input, avec l’attribut type="file". Vous pouvez aussi utiliser la classe .form-control, toujours pour avoir une mise en forme Bootstrap.
L’exemple à télécharger est dans le dossier 07-Formulaires-10.
Voici le code de cet exemple :
<form role="form">
<div class="mb-3">
<label for="fichier" class="form-label">Sélectionnez
un fichier :</label>
<input class="form-control" type="file" id="fichier">
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form> Voici l’affichage obtenu après avoir sélectionné un fichier PDF dans cet exemple :
Des éléments de mise en forme
1. Les étiquettes flottantes
Les étiquettes des champs sont des éléments indispensables dans les formulaires. Mais pour gagner un peu de place, vous pouvez les faire « flotter » dans les champs de saisie. Cela veut dire que l’étiquette va s’afficher dans le champ de saisie. Pour cela, utilisez une boîte <div> avec la classe .form-floating. Dans chaque boîte <div>, placez l’élément input et l’élément label. Il est préconisé d’insérer d’abord l’élément input.
L’exemple à télécharger est dans le dossier 07-Formulaires-11.
Voici le code de cet exemple :
<form role="form">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="nom"
placeholder="Votre nom">
<label for="nom">Nom</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="prenom"
placeholder="Votre prénom">
<label...Les éléments d’information ajoutés aux champs
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...
Les exemples à télécharger sont dans le dossier 07-Formulaires-13.
1. Les informations supplémentaires simples
Dans cet exemple, vous allez ajouter des informations supplémentaires simples aux champs de saisie. Ces éléments d’information seront placés soit à gauche, soit à droite des champs, soit des deux côtés.
Voici le code de l’exemple :
<form role="form">
<div class="input-group mb-3">
<span class="input-group-text" id="prenom">Prénom</span>
<input type="text" class="form-control" placeholder="Votre prénom"
aria-label="prenom" aria-describedby="prenom">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="nom">Nom</span>
<input type="text" class="form-control" placeholder="Votre nom"
aria-label="nom" aria-describedby="nom">
</div>
<div...