HTML : structurez le contenu

Ce que vous saurez faire

Relier les éléments visibles d’un formulaire aux données transmises et vérifier une interaction sans souris. Le HTML natif fournit une première base, sans remplacer la validation du serveur.

1. Chaque attribut répond à une question

Un label dit ce qui est attendu. id identifie l’élément dans la page ; name nomme la donnée envoyée. Ces attributs ne sont donc pas interchangeables.

<form action="/inscriptions" method="post">
  <label for="email">Votre adresse e-mail</label>
  <input
    id="email"
    name="email"
    type="email"
    autocomplete="email"
    aria-describedby="email-help"
    required
  >
  <p id="email-help">Pour recevoir votre lien d’accès au cours.</p>
  <button type="submit">Demander un accès</button>
</form>

L’endpoint /inscriptions est illustratif : il faut un serveur qui traite cette requête pour obtenir une inscription réelle. Vous pouvez déjà tester la validation locale en ouvrant une page contenant ce formulaire.

Cliquer sur le label amène le focus dans le champ. Le texte d’aide reste présent lorsque l’on saisit ; un simple placeholder ne le remplacerait pas. Le bouton soumet le formulaire, tandis qu’un lien vers un autre cours servirait à naviguer.

Référence : premier formulaire.

2. La validation du navigateur a des limites

required refuse une valeur vide et type="email" impose une forme d’adresse plausible. Cela ne prouve ni que la boîte existe ni que la personne la possède. Une vérification par e-mail est une autre étape, côté application.

Un appel direct à votre serveur peut contourner le navigateur. Celui-ci doit donc valider de nouveau les données reçues. Affichez une erreur utile près du champ concerné, pas seulement une bordure rouge. Une explication comme « Renseignez une adresse au format nom@domaine.fr » indique comment poursuivre.

Référence : champ e-mail.

3. Vérifier le parcours, pas seulement l’apparence

Parcourez la page avec Tab, saisissez une valeur et activez le bouton au clavier. Le focus doit rester visible et suivre un ordre logique. Testez aussi la page avec un zoom important : label, aide et bouton doivent rester lisibles.

À vous de jouer

Retirez uniquement name="email", puis réfléchissez à la différence entre ce que l’utilisateur voit et ce que le serveur reçoit.

Correction commentée

Le champ reste visible, son label fonctionne et la validation peut encore agir. Pourtant sa valeur n’est plus incluse comme donnée nommée dans la soumission native du formulaire. Une interface apparemment correcte peut donc produire une requête incomplète.