Formulaire accessible avec labels correctement liés

É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

Comportements à vérifier dans un navigateur :

• cliquer sur le texte « Nom » place le curseur dans le champ correspondant ; idem pour « Email » et « Message » ;
• soumettre le formulaire vide déclenche la validation native du navigateur sur le premier champ manquant, sans qu'aucun script ne soit chargé ;
• le champ email refuse une valeur sans @.

Le premier point est le test réel de l'association label / input : il échoue si for et id ne correspondent pas.