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 :
class=”form-group”
...
class=”form-group”
...
....
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 :
class=”form-group”
for=”timeInput”Temps :
type=”text” class=”form-control” placeholder=”mm:ss” id=”Heure”
La structure de l'entrée de la zone de texte pour la note est la suivante :
class=”form-group”
for=”note”Note :
class=”form-control” id=”note” rows=”5” required
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 :
class=”form-group”
class="form-check"
class="form-check-input" type="checkbox" id="publicCheck"
class="form-check-label" for="gridCheck"
Rendre cette notation publique
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.
type="submit" class="btn btn-primary"Envoyer
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.