Gérer les éléments d'un formulaire

Gérer les éléments d'un formulaire | Med Learning

Leçon 1

Lire les champs d'un formulaire

Champ	Propriété à lire	Exemple
texte, email, nombre, `textarea`	`value` (toujours une chaîne)	`champ.value`
nombre (en nombre)	`valueAsNumber` ou `Number(champ.value)`	`age.valueAsNumber`
case à cocher	`checked` (`true` / `false`)	`conditions.checked`
boutons radio	la valeur du bouton coché	`form.querySelector('input[name="genre"]:checked')?.value`
liste `select`	`value` (l'option choisie)	`ville.value`

Événement	Se déclenche…	Usage
`input`	à chaque modification (chaque caractère tapé)	compteur de caractères, recherche en direct, vérification instantanée
`change`	quand la valeur est validée (champ quitté, case cochée, option choisie)	`select`, cases à cocher, boutons radio
`focus` / `blur`	quand le champ reçoit / perd le curseur	afficher une aide, vérifier en quittant le champ
`submit`	sur le formulaire, à l'envoi (bouton submit ou touche Entrée)	validation avant envoi

Vidéo · À regarder

JavaScript Full Course for free

Bro Code · YouTube

Regarde de 1:31:56 à 1:42:0310 min 7 s

Ouvrir sur YouTube à 1:31:56

Leçon 2

Soumettre et réinitialiser

Méthode	Effet
`form.submit()`	envoie le formulaire à l'adresse de l'attribut `action` (sans déclencher l'événement `submit`, donc sans validation)
`form.requestSubmit()`	envoie le formulaire comme un clic sur le bouton d'envoi : la validation et l'événement `submit` ont lieu
`form.reset()`	réinitialise tous les champs à leur valeur initiale

Leçon 3

Interrompre l'envoi d'un formulaire

Leçon 4

Valider un formulaire

Attribut	Contrainte
`required`	champ obligatoire
`type="email"`, `type="url"`, `type="number"`, `type="date"`	format du type
`min`, `max`, `step`	valeur minimale, maximale, pas (nombres, dates)
`minlength`, `maxlength`	longueur minimale, maximale du texte

Travaux pratiques

L'inscription complète

Exercices

Exercice 12.1

Choisis la bonne réponse

1La valeur d'un <input type="number"> lue avec .value est…
2Pour savoir si une case est cochée :
3L'événement déclenché à chaque caractère tapé est…
4Pour empêcher l'envoi d'un formulaire :
5form.reset()…
6La validation côté serveur est…
7L'attribut qui impose une expression régulière est…

0/7 répondues

Exercice 12.2

Le mot de passe

Exercice 12.3

Le calcul de prix

L'essentiel du chapitre

À retenir

Lire : value (toujours une chaîne), checked (cases, radios), select.value ; new FormData(form).
Événements : input (chaque frappe), change (valeur validée), focus / blur, submit sur le formulaire.
form.submit() envoie sans validation ; form.requestSubmit() avec ; form.reset() réinitialise.
e.preventDefault() dans submit : bloque l'envoi pour valider ou envoyer en AJAX.
Validation HTML5 : required, type, min, max, minlength, pattern ; CSS : :valid, :invalid, :user-invalid.
La validation côté client aide l'utilisateur ; la validation côté serveur reste obligatoire.

Pseudo-classe	Sélectionne les champs…
`:required` / `:optional`	obligatoires / facultatifs
`:valid` / `:invalid`	dont la valeur est valide / invalide
`:disabled`	désactivés
`:user-invalid`	invalides après que l'utilisateur les a modifiés (évite d'afficher des erreurs dès le chargement)

Un formulaire d'inscription

html

<form id="inscription" action="/inscription.php" method="post">
  <label>Nom <input type="text" name="nom" id="nom"></label>
  <label>E-mail <input type="email" name="email" id="email"></label>
  <label>Âge <input type="number" name="age" id="age"></label>
  <label>Filière
    <select name="filiere" id="filiere">
      <option value="">-- Choisir --</option>
      <option value="dev">Développement digital</option>
      <option value="infra">Infrastructure digitale</option>
    </select>
  </label>
  <label><input type="radio" name="cours" value="jour"> Cours du jour</label>
  <label><input type="radio" name="cours" value="soir"> Cours du soir</label>
  <label><input type="checkbox" id="conditions"> J'accepte le règlement</label>
  <button type="submit">S'inscrire</button>
  <button type="reset">Effacer</button>
</form>
<p id="message"></p>

Lire toutes les valeurs

const form = document.querySelector("#inscription");

const nom = form.querySelector("#nom").value.trim();
const age = Number(form.querySelector("#age").value);
const filiere = form.querySelector("#filiere").value;
const cours = form.querySelector('input[name="cours"]:checked')?.value;   // undefined si aucun
const accepte = form.querySelector("#conditions").checked;

// accès par le nom : document.forms["inscription"]["nom"].value

// ou tout d'un coup avec FormData :
const donnees = Object.fromEntries(new FormData(form));   // { nom: "...", email: "...", ... }

Un compteur de caractères en direct

const bio = document.querySelector("#bio");          // <textarea id="bio" maxlength="200">
const reste = document.querySelector("#reste");
bio.addEventListener("input", () => {
  reste.textContent = `${200 - bio.value.length} caractères restants`;
});

L'exemple du résumé, corrigé

html

<form id="FORM1" method="post" action="/code.php">
  <label>Nom <input type="text" name="nom"></label>
  <label>Âge <input type="text" name="age"></label>
  <input type="button" id="btnEnvoyer" value="ENVOYER">
  <input type="button" id="btnEffacer" value="EFFACER">
</form>
<p id="message"></p>
<script>
  const form = document.getElementById("FORM1");
  document.getElementById("btnEnvoyer").addEventListener("click", () => form.submit());
  document.getElementById("btnEffacer").addEventListener("click", () => {
    form.reset();
    document.getElementById("message").textContent = "Formulaire réinitialisé";
  });
</script>

Intercepter l'envoi

const form = document.querySelector("#inscription");

form.addEventListener("submit", (e) => {
  e.preventDefault();                  // le formulaire n'est pas envoyé
  console.log("Données :", Object.fromEntries(new FormData(form)));
});

Le navigateur bloque l'envoi tout seul

html

<form action="/code.php" method="post">
  <input type="text" name="nom" required minlength="2">
  <input type="email" name="email" required>
  <input type="tel" name="tel" pattern="0[5-7][0-9]{8}" title="10 chiffres, commençant par 05, 06 ou 07">
  <input type="number" name="age" min="15" max="35">
  <input type="submit" value="Envoyer">
</form>

L'exemple du résumé : bloquer l'envoi si le nom est vide

form.addEventListener("submit", (e) => {
  const nom = form.querySelector("#nom").value.trim();
  if (nom === "") {
    e.preventDefault();
    alert("Le champ « nom » doit être saisi");
  }
});

Validation avec messages sous les champs

const form = document.querySelector("#inscription");

function erreur(champ, message) {
  champ.classList.add("erreur");
  const p = document.createElement("p");
  p.className = "msg-erreur";
  p.textContent = message;
  champ.closest("label").after(p);
}

form.addEventListener("submit", (e) => {
  e.preventDefault();
  form.querySelectorAll(".msg-erreur").forEach(p => p.remove());     // 2. effacer
  form.querySelectorAll(".erreur").forEach(c => c.classList.remove("erreur"));

  let valide = true;
  const nom = form.querySelector("#nom");
  const email = form.querySelector("#email");
  const age = form.querySelector("#age");

  if (nom.value.trim().length < 2) {
    erreur(nom, "Le nom doit contenir au moins 2 caractères.");
    valide = false;
  }
  if (!/^[\w.-]+@[\w-]+\.[a-z]{2,}$/i.test(email.value)) {
    erreur(email, "L'adresse e-mail n'est pas valide.");
    valide = false;
  }
  const n = Number(age.value);
  if (!Number.isInteger(n) || n < 15 || n > 35) {
    erreur(age, "L'âge doit être un entier entre 15 et 35.");
    valide = false;
  }
  if (!form.querySelector("#conditions").checked) {
    alert("Tu dois accepter le règlement.");
    valide = false;
  }

  if (valide) {
    document.querySelector("#message").textContent = "Inscription envoyée !";
    // form.submit();   ou un envoi AJAX (chapitre 14)
  }
});