• 10 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 5/23/23

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

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.

Example of certificate of achievement
Example of certificate of achievement