contact@bootstrap-top-design.com

Créer un formulaire Bootstrap facilement en 2 simples étapes

réaliser un formulaire à l'aide de Bootstrap

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

appliquer les styles prévus à 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>
zones de champs réalisés à l'aide de Bootstrap
  • 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>
radiobutton et checkbox d'un formulaire Bootstrap
  • Les boutons 

Bootstrap met à notre disposition la classe .btn pour styliser un bouton et nous propose aussi les couleurs suivantes pour les boutons :

  1. .btn-danger : pour le rouge
  2. .btn-warning : pour l’orange
  3. .btn-success : pour le vert
  4. .btn-primary : pour le bleu clair
  5. .btn-info : pour le bleu ciel
  6. .btn-secondary : pour le gris foncé
  7. .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>
des boutons stylisés à l'aide de bootstrap

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

agencer les éléments dans un formulaire Bootstrap
  • 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>
champs organisés à l'aide dans un conteneur
  • 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>
champs organisés grace à la grille de Bootstrap

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.

Laisser un commentaire