• 10 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 30/03/2022

Permettez à vos visiteurs de vous contacter grâce aux formulaires

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

Découvrez les formulaires

Les formulaires sont utilisés pour tout ce qui implique une saisie de données de la part des utilisateurs : inscription, connexion, recherche, modification d’informations. Pour permettre à vos visiteurs de vous contacter sur votre portfolio, vous allez à présent créer un prototype de formulaire de contact.

Un formulaire de connexion : sous Email address et Password, des champs à remplir, avec un bouton Submit pour valider.
Le formulaire de base de Bootstrap

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

Commençons par définir les champs dont nous avons besoin :

  • un nom ;

  • un prénom ;

  • un e-mail ;

  • un message ;

  • un bouton “Envoyer”.

Comme à notre habitude maintenant, commençons par nous rendre sur la documentation de Bootstrap 5, dans la rubrique “Forms”.

En cliquant sur “Overview”, nous pouvons voir la structure d’un formulaire classique.

<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

En laissant volontairement de côté la  checkbox  , nous observons deux éléments récurrents dans cet exemple : les classes  .form-control  et  .form-label. Ce sont les deux classes qui permettront à nos  input  d’être mis en page et d'accéder aux affichages alternatifs s’ils sont  disabled  ou en  readonly.

Une autre particularité de la structure du formulaire, c’est la div  qui englobe le champ (input + label). Dans l’exemple, on remarque également la classe utilitaire  .mb-3  (margin-bottom).

Pour récapituler, notre champ de formulaire :

  • doit être entouré d’une div  ;

  • son input doit avoir la classe  .form-control  ;

  • son label doit avoir la classe  .form-label

En respectant cette structure, nous nous assurons du bon affichage de notre champ.

En parcourant la documentation, nous pouvons voir qu’en fonction du type d’input (select, checkbox, range, etc.), la classe associée ainsi que la structure peuvent varier.

Nous pouvons résumer ça avec le tableau que vous trouverez dans ce cours :

Classes

Input

input.form-control

label.form-label

text (et ses dérivés, email, password, etc.)

textarea

select.form-select 

select

div.form-check

input.form-check-input

label.form-check-label

checkbox

radio

input.form-range

label.form-label

range

À vous de jouer !

Votre mission pour ce chapitre sera de créer votre formulaire de contact dans la section “Contact” de votre portfolio :

  • Les champs “Nom” et “Prénom” devront être sur la même ligne.

  • Les champs “E-mail” et “Message” devront venir l’un en dessous de l’autre.

  • Le bouton “Envoyer” devra prendre toute la largeur de la ligne.

À vous de structurer votre formulaire et d’utiliser les classes utilitaires qui conviennent. Une fois que vous avez effectué ces modifications, suivez-moi dans le screencast ci-dessous pour comparer votre travail avec le mien !

Vous commencez à avoir l’habitude maintenant, on voit que nous utilisons à nouveau le système de grille de Bootstrap 5 pour structurer notre formulaire. Et bien sûr, on retrouve les classes vues juste au-dessus pour mettre en page nos champs.

En résumé

  • Chaque grand type d’input a une classe Bootstrap associée.

  • Il est possible de structurer les champs du formulaire grâce au système de grille de Bootstrap 5 et aux classes utilitaires.

Maintenant que vous savez comment ajouter des formulaires, vous allez voir comment utiliser les “modals” et les “tooltips” de Bootstrap 5.

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