Formulaires et libellés

01Les libellés sont essentiels

Reliez chaque label à son champ en utilisant des valeurs for et id identiques. Un placeholder est une indication, pas un remplacement pour un libellé visible.

<label for="name">Your name</label>
<input id="name" name="name" autocomplete="name" required>

02Choisir le bon champ

Utilisez email pour une adresse e-mail et textarea pour les messages longs. L’attribut name identifie le champ lors de l’envoi. La validation du navigateur aide l’utilisateur, mais le serveur doit aussi vérifier les données.

<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<label for="message">Your project</label>
<textarea id="message" name="message" rows="4"></textarea>

03Un formulaire doit avoir une destination

HTML seul n’envoie pas d’e-mail. Un vrai formulaire exige une destination action fonctionnelle ou du JavaScript relié à un serveur. Testez la réception avant d’affirmer que les demandes arrivent.

<!-- Example only: /contact must be implemented on a server. -->
<form action="/contact" method="post">
  <label for="project">Project</label>
  <input id="project" name="project" required>
  <button type="submit">Send request</button>
</form>

04À vous de jouer

Ajoutez un champ e-mail avec un label. Cet éditeur n’envoie ni n’enregistre les informations du formulaire.

Pour aller plus loin

Consultez les guides MDN et standard HTML Living Standard pour approfondir et connaître les bonnes pratiques des navigateurs actuels.