Créez des sites web responsive avec Bootstrap 4

La méthode la plus simple, pour ajouter la structure à vos formulaires à l'aide de Bootstrap, est de créer un élément <div>  utilisant la classe .form-group pour contenir les éléments associés à chaque champ de formulaire :

<form>
   <div class=”form-group”>
      ...
   </div>
   <div class=”form-group”>
      ...
   </div>
   ....
</div>

La classe que vous appliquez pour façonner les champs de contrôle du formulaire varie selon le type de champ.

Le tableau suivant récapitule les types de contrôle du formulaire les plus courants et la classe de Bootstrap qui doit lui être ajoutée en conséquence :

Par exemple, la structure du champ d'entrée de texte pour la saisie de l'heure est la suivante :

<div class=”form-group”>
   <label for=”timeInput”>Temps :</label>
   <input type=”text” class=”form-control” placeholder=”mm:ss” id=”Heure”>
</div>

La structure de l'entrée de la zone de texte pour la note est la suivante : 

<div class=”form-group”>
   <label for=”note”>Note :</label>
   <textarea class=”form-control” id=”note” rows=”5” required>
</div>

Comme pour les contrôles de formulaire de type case à cocher et bouton radio, vous devez également envelopper le libellé et les contrôles dans un élément  <div>  avec une classe .form-check, qui est un enfant de l’élément <div>  utilisant la classe .form-group. 

Vous devez également appliquer les classes  .form-check-input et .form-check-label à chaque entrée et libellé. De cette façon,  Bootstrap proposera la mise en page appropriée pour ces types de contrôle.

La structure de la case à cocher de notre formulaire est la suivante :

<div class=”form-group”>
   <div class="form-check">
      <input class="form-check-input" type="checkbox" id="publicCheck">
      <label class="form-check-label" for="gridCheck">
      Rendre cette notation publique
      </label>
   </div>
</div>

Pour finaliser notre formulaire, il ne vous reste plus qu’à ajouter le bouton qui permettra à l’utilisateur de soumettre sa note. Utilisez l’élément <button>  avec les classes de bouton Bootstrap standard que vous avez apprises précédemment.

<button type="submit" class="btn btn-primary">Envoyer</button>

 Combinez tous les éléments pour créer le formulaire de prise de notes de la page Détails du cours. Vérifiez votre travail dans le dossier partie-4/chapitre-2/formulaire du dépôt Git du cours.

Lorsque vous testez le formulaire, essayez de cliquer sur le bouton Envoyer. Ensuite, réessayez en laissant vide l'élément Textarea pour la notation. Vous devriez obtenir une erreur de validation avec une invitation à remplir ce champ. Ce type de validation est prêt à l'emploi avec Bootstrap lorsque vous ajoutez l'attribut Required à un élément de formulaire.

• Pour créer un formulaire avec Boostrap, vous pouvez créer un élément <div>  utilisant la classe .form-group.

• Il existe différents types de contrôle du formulaire :

  <input type=”text”>	.form-control
  <input type="text" readonly>	.form-control-plaintext
  <textarea>	.form-control
  <select>	.form-control
  <input type="range">	.form-control-range

• Vous pouvez combiner les différents types de contrôle pour créer votre formulaire.

Maintenant que vous avez appris à créer un formulaire avec Bootstrap, vous êtes prêt à régler les détails de votre site en utilisant les classes utilitaires de Bootstrap.