Un élève écrit ce formulaire d'inscription

Les cinq défauts.

• Ligne 2--3 : le libellé ne désigne rien. <label for="nom"> pointe vers un élément d'identifiant nom, mais le champ porte id="prenom". Constat : cliquer sur le mot « Nom » ne place pas le curseur dans le champ, et un lecteur d'écran n'annonce pas le libellé.
• Ligne 3 : le champ n'a pas de name. C'est le défaut le plus grave, et le plus silencieux : la page est parfaite à l'écran, mais la valeur saisie n'est pas transmise. Le name est le nom sous lequel la valeur voyage ; sans lui, le navigateur ignore le champ à l'envoi.
• Ligne 4 : le <label> n'est pas fermé. Le navigateur « répare » à sa façon, et le résultat dépend de lui : la mise en forme peut différer d'un navigateur à l'autre.
• Ligne 6--8 : le <select> n'est pas fermé. Le bouton se retrouve à l'intérieur de la liste déroulante.
• Ligne 1 : pas de method. En son absence, le navigateur emploie GET : les données d'inscription partiront dans l'URL, visibles dans la barre d'adresse et gardées dans l'historique. Pour une inscription, c'est POST qu'il fallait.

Le fragment corrigé.

<form action="/inscription" method="post">
  <label for="nom">Nom</label>
  <input type="text" id="nom" name="nom">

  <label for="courriel">Courriel</label>
  <input type="email" id="courriel" name="courriel">

  <label for="classe">Classe</label>
  <select id="classe" name="classe">
    <option value="1re">1re</option>
    <option value="Tle">Tle</option>
  </select>

  <button type="submit">Envoyer</button>
</form>

Contrôle : chaque champ a maintenant un name, donc trois valeurs partiront (nom, courriel, classe) ; chaque id est cité par un et un seul for ; toutes les balises ouvertes sont refermées.

Piège : confondre id et name. L'id sert dans la page — au CSS pour styler, au JavaScript et au <label> pour désigner. Le name sert hors de la page : c'est l'étiquette sous laquelle la valeur arrive au serveur. Un champ peut avoir l'un sans l'autre, et l'oubli du second ne se voit pas à l'écran.