• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/08/2020

Obtenez l'avis des utilisateurs grâce à des formulaires

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Pour améliorer l’expérience utilisateur sur votre site d’informatique (Info School), vous allez à présent créer un prototype de formulaire afin de recueillir l’avis des apprenants.

Familiarisons-nous avec la manière de créer des formulaires à l'aide de Bootstrap, afin que vous puissiez réaliser ce prototype.

Le formulaire se trouvera dans le contenu au bas de la page Détails du cours après les détails de la leçon, et contiendra les champs obligatoires ou facultatifs suivants :

  • un champ Heure pour définir à quel moment de la vidéo se rapporte la note (facultatif) ;

  • un élément Textarea pour la note (obligatoire) ;

  • une case à cocher pour indiquer si la note doit être publique (facultatif) ;

  • un bouton Envoyer. 

Créez un formulaire

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 :

Type de contrôle du formulaire

Classe 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 

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.

En résumé

  • 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.

Exemple de certificat de réussite
Exemple de certificat de réussite