Bootstrap pour nous aider à réaliser de splendides formulaires, elle a donné du punch aux éléments HTML permettant de concevoir un formulaire dont les styles primitifs sont inattrayant.
Découvrons en 2 simples étapes comment concevoir un magnifique formulaire Bootstrap.
Première Etape : Connaitre et appliquer le style prévu aux éléments d’un formulaire Bootstrap
- Les zones de texte
Bootstrap applique un bord arrondi aux zones de texte, et pour signifier qu’une zone de texte est active elle lui applique une bordure bleue et un ombrage bleu.
La classe Bootstrap permettant de styliser une zone de texte est .form-control
Exemple :
<form> <div> <input type="text" class="form-control"> </div> <div> <textarea class="form-control"></textarea> </div> </form>
- Les checkboxes et les radiobuttons
Ces éléments permettent sur un formulaire de faire son choix en le marquant d’une coche.
Pour styliser ces éléments à l’aide de Bootstrap, il faut leur ajouter la classe .custom-control-input et leur faire suivre d’un label qui portera la classe .custom-control-label.
Ensuite, il faut placer l’élément et le label dans une division qui portera les classes .custom-control et .custom-checkbox pour les checkboxes et pour les radiobuttons la division doit porter les classes .custom-control et .custom- radio.
Exemple :
<form>
<!-- Checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkb">
<label class="custom-control-label" for="chkb">Ceci est un checkbox</label>
</div>
<!-- Radiobutton -->
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="radio1">
<label class="custom-control-label" for="radio1">Ceciest un radiobouton</label>
</div>
</form>
- Les boutons
Bootstrap met à notre disposition la classe .btn pour styliser un bouton et nous propose aussi les couleurs suivantes pour les boutons :
- .btn-danger : pour le rouge
- .btn-warning : pour l’orange
- .btn-success : pour le vert
- .btn-primary : pour le bleu clair
- .btn-info : pour le bleu ciel
- .btn-secondary : pour le gris foncé
- .btn-light : pour le gris clair
Exemple :
<form>
<button class="btn btn-danger">Bouton de couleur rouge
</button>
<button class="btn btn-warning">Bouton de couleur orange
</button>
<button class="btn btn-success">Bouton de couleur verte
</button>
<button class="btn btn-primary">Bouton de couleur bleu Claire
</button>
<button class="btn btn-info">Bouton de couleur bleu ciel
</button>
<button class="btn btn-secondary">Bouton de couleur grise foncée
</button>
<button class="btn btn-light">Bouton de couleur grise claire
</button>
</form>
Bootstrap ne propose pas que les styles pour les zones de texte, les boutons, les checkboxes et les radiobuttons, elle propose aussi des styles pour d’autres éléments que vous pouvez découvrir ici.
Deuxième étape : Agencez les éléments du formulaire au sein d’un layout
- Insérer des conteneurs au sein du formulaire
Pour une bonne présentation d’un formulaire Bootstrap, nous avons à notre disposition le conteneur .form-group pour regrouper les éléments et les disposer proprement les uns par rapport aux autres
Exemple :
<form>
<div class="form-group">
<label for="nom">Nom</label>
<input id="nom" type="text" class="form-control" name="" placeholder="Entrer votre nom">
</div>
<div class="form-group">
<label for="mail">Email</label>
<input id="mail" type="text" class="form-control" name="" placeholder="Entrer votre mail">
</div>
</form>
- Organiser les éléments du formulaire à l’aide de la grille
Au sein d’un formulaire bootstrap, nous pouvons utiliser la grille de Bootstrap pour organiser les éléments.
Ceci nous permet de décider des dispositions que doivent avoir les éléments du formulaire en fonction du type d’écran d’affichage.
En plus de la classe .row qui nous permet de définir la ligne d’une grille, Bootstrap a aussi ajouté spécialement pour les formulaires la classe .form-row qui joue le même rôle que .row.
La seule différence entre les deux est que .form-row applique des marges beaucoup plus rétrécies que .row.
Exemple :
<form>
<div class="form-group">
<div class="form-row">
<label class="col-md-3" for="nom">Nom</label>
<div class="col-md-9">
<input id="nom" type="text" class="form-control" name="" placeholder="Entrer votre nom">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-3" for="mail">Email</label>
<div class="col-md-9">
<input id="mail" type="text" class="form-control" name="" placeholder="Entrer votre mail">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-1 offset-md-11">
<button class="btn btn-warning">Envoyer</button>
</div>
</div>
</div>
</form>
Réalisons ensemble un joli formulaire bootstrap en suivant ces deux simples étapes étudiées
Nous allons réaliser un formulaire d’inscription comportant les éléments suivants :
- Un champ pour entrer le nom de famille
- Un champ pour entrer le prénom
- Un champ pour entrer l’adresse mail
- Un champ pour entrer le numéro de téléphone
- Un champ pour entrer l’adresse
- 2 radiobuttons proposant le sexe masculin et le sexe féminin
- Et ensuite, un joli bouton permettant d’envoyer les données enregistrées
<form>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="nom">Nom</label>
<input id="nom" class="form-control" type="text" name="" placeholder="Entrer votre nom">
</div>
<div class="col-md-6">
<label for="prenom">Prénom</label>
<input id="prenom" class="form-control" type="text" name="" placeholder="Entrer votre prénom">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="mail">Mail</label>
<input id="mail" class="form-control" type="text" name="" placeholder="Entrer votre mail">
</div>
<div class="col-md-6">
<label for="numéro">Numéro</label>
<input id="numéro" class="form-control" type="text" name="" placeholder="Entrer votre numéro">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-12">
<label for="adresse">Adresse</label>
<input id="adresse" class="form-control" type="text" name="" placeholder="Entrer votre adresse">
</div>
</div>
</div>
<div class="form-group">
<label>Sexe</label>
<div class="form-row">
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input" id="radio1" name="radiobouton">
<label class="custom-control-label" for="radio1">Masculin</label>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input" id="radio2" name="radiobouton">
<label class="custom-control-label" for="radio2">Ceci est un radiobouton</label>
</div>
</div>
</div>
<button class="btn btn-primary">S'inscrire</button>
</form>
Démo Vous avez maintenant les ressources nécessaires pour créer de magnifiques formulaires sur vos pages contact. Seule la pratique rend parfait, du coup passez à l’action en concevant vous-même des formulaires à l’aide des éléments vus dans ce tutoriel.
Je vous ai aussi préparé un article sur comment concevoir un popup Bootstrap, je l’ai simplifié en trois simples étapes pour que vous puissiez la maitriser rapidement et facilement. Le tutoriel sur le popup bootstrap est ici.
En bonus, j’ai conçu 9 formulaires Bootstrap téléchargeables gratuitement. Vous pouvez les obtenir en cliquant ici.