Formulaire accessible avec labels correctement liés

Créer un formulaire HTML5 avec trois champs (nom, email, message), chaque champ relié à son label via for/id, marqué required, et doté d'un attribut autocomplete adapté. Pas de JavaScript.

15 minPublié le 20 mai 2026Proposé par Anonyme

Défi

// Lisez attentivement, codez sur votre machine

Énoncé

Créer un formulaire HTML5 complet avec trois champs : un champ texte pour le nom, un champ email et une zone de texte pour le message. Chaque champ doit être accompagné d'un <label> dont l'attribut for correspond exactement à l'id du champ associé. Les trois champs sont obligatoires (required). Un bouton <button type="submit"> valide le formulaire. Aucun script n'est autorisé.

Contraintes

HTML5 uniquement, pas de JavaScript ni de CSS externe.
Attributs autocomplete : name pour le nom, email pour l'email, off pour le message.
Le <form> doit avoir un action (peut être #) et un method="post".
Les id des champs et les for des labels doivent correspondre exactement.
Le marqueur required doit être présent sur les trois champs.

Exemple

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Formulaire de contact</title>
</head>
<body>
  <form action="#" method="post">
    <div>
      <label for="nom">Nom</label>
      <input type="text" id="nom" name="nom" required autocomplete="name">
    </div>
    <div>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required autocomplete="email">
    </div>
    <div>
      <label for="message">Message</label>
      <textarea id="message" name="message" required autocomplete="off"></textarea>
    </div>
    <button type="submit">Envoyer</button>
  </form>
</body>
</html>

Le navigateur affiche trois champs étiquetés, tous obligatoires. Cliquer sur un label met le focus sur le champ correspondant. Sans JavaScript, la validation HTML5 native bloque la soumission si un champ est vide.

Espace solution

Proposer une solution

Connectez-vous ou créez un compte pour envoyer votre code (aucune exécution côté serveur — on stocke juste le texte pour la communauté).

Se connecter Créer un compte

Défi précédentTrier avec sort.Interface personnalisée Défi suivant Tableau sémantique avec thead, tbody et scope