Les formulaires — Cours Bootstrap 5

Les formulaires — Cours Bootstrap 5 | Med Learning

Leçon 1

Les champs de base

Un formulaire Bootstrap

html

<form action="/contact" method="post">
  <div class="mb-3">
    <label for="email" class="form-label">Adresse e-mail</label>
    <input type="email" class="form-control" id="email" name="email" aria-describedby="aide-email" required>
    <div id="aide-email" class="form-text">Nous ne partagerons jamais ton e-mail.</div>
  </div>
  <div class="mb-3">
    <label for="objet" class="form-label">Objet</label>
    <select class="form-select" id="objet" name="objet">
      <option value="devis">Devis</option>
      <option value="stage">Stage</option>
    </select>
  </div>
  <div class="mb-3">
    <label for="message" class="form-label">Message</label>
    <textarea class="form-control" id="message" name="message" rows="4"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Envoyer</button>
</form>

Tableau: Les classes de formulaire

Classe	Sur…	Rôle
`form-label`	`<label>`	libellé avec la bonne marge
`form-control`	`<input>`, `<textarea>`	champ pleine largeur, bordure, focus
`form-select`	`<select>`	liste déroulante stylisée
`form-text`	`<div>`	texte d'aide sous le champ
`form-control-lg` / `-sm`	champ	taille
`mb-3`	conteneur	espace entre les groupes

Vidéo · À regarder

Bootstrap 5 Crash Course

Web Dev Simplified · YouTube

Regarde de 22:46 à 28:115 min 25 s

Ouvrir sur YouTube à 22:46

Leçon 2

Cases à cocher, radios et interrupteurs

Leçon 3

Un formulaire en grille

Leçon 4

Groupes de saisie et labels flottants

Vidéo · À regarder

Bootstrap 5 Crash Course

Web Dev Simplified · YouTube

Regarde de 28:11 à 30:522 min 41 s

Ouvrir sur YouTube à 28:11

Vidéo · À regarder

Bootstrap 5 Crash Course

Web Dev Simplified · YouTube

Regarde de 30:52 à 32:25

Leçon 5

La validation

Classe	Effet
`is-valid`	bordure verte
`is-invalid`	bordure rouge
`valid-feedback` / `invalid-feedback`	message affiché sous le champ selon son état
`needs-validation` (sur le `form`) + `novalidate`	validation stylisée par Bootstrap au lieu des bulles du navigateur
`was-validated`	classe ajoutée au `form` par JavaScript après la tentative d'envoi

Travaux pratiques

La barre de recherche

Exercices

Exercice 6.1

Choisis la bonne réponse

1Quelle classe stylise un <input type="text"> ?
2Pour une liste déroulante :
3Un interrupteur s'obtient avec…
4Dans form-floating, le <label> se place…
5Pour afficher une bordure rouge :
6La validation Bootstrap…

0/6 répondues

Exercice 6.2

Le formulaire d'inscription

L'essentiel du chapitre

À retenir

Champs : form-label, form-control, form-select, form-text, groupes espacés par mb-3.
Choix : form-check + form-check-input + form-check-label ; form-switch ; form-check-inline.
Mise en page : row g-3 + col-md-*.
input-group + input-group-text ; form-floating (input avant label, avec placeholder).
Validation : is-valid/is-invalid, invalid-feedback, needs-validation novalidate + script. Le serveur revérifie toujours.

form-check et form-switch

html

<fieldset class="mb-3">
  <legend class="fs-6 fw-semibold">Rythme</legend>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="rythme" id="jour" value="jour" checked>
    <label class="form-check-label" for="jour">En journée</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="rythme" id="soir" value="soir">
    <label class="form-check-label" for="soir">En soirée</label>
  </div>
</fieldset>

<div class="form-check form-switch mb-3">
  <input class="form-check-input" type="checkbox" role="switch" id="newsletter" name="newsletter">
  <label class="form-check-label" for="newsletter">Recevoir la newsletter</label>
</div>

Deux champs côte à côte à partir de md

html

<div class="row g-3">
  <div class="col-md-6">
    <label for="prenom" class="form-label">Prénom</label>
    <input type="text" class="form-control" id="prenom" name="prenom">
  </div>
  <div class="col-md-6">
    <label for="nom" class="form-label">Nom</label>
    <input type="text" class="form-control" id="nom" name="nom">
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">S'inscrire</button>
  </div>
</div>

input-group et form-floating

html

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="pseudo" aria-label="Nom d'utilisateur">
</div>

<div class="input-group mb-3">
  <input type="number" class="form-control" aria-label="Montant">
  <span class="input-group-text">DH</span>
</div>

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="mail-flottant" placeholder="nom@exemple.com">
  <label for="mail-flottant">Adresse e-mail</label>
</div>

Un champ invalide avec son message

html

<div class="mb-3">
  <label for="mdp" class="form-label">Mot de passe</label>
  <input type="password" class="form-control is-invalid" id="mdp" name="mdp" minlength="8" aria-describedby="mdp-erreur" required>
  <div id="mdp-erreur" class="invalid-feedback">8 caractères minimum.</div>
</div>

Le petit script de la documentation Bootstrap

document.querySelectorAll('.needs-validation').forEach(form => {
  form.addEventListener('submit', event => {
    if (!form.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
    form.classList.add('was-validated');
  });
});