Des formulaires complets et accessibles

Un site vitrine sans moyen de contact, c’est une boutique sans porte. Camille veut que ses clients puissent lui écrire : il lui faut un formulaire. Dans cette leçon, vous allez construire un formulaire complet, comprendre chaque type de champ, profiter de la validation native du navigateur et surtout le rendre utilisable par tout le monde. Un avertissement honnête avant de commencer : le HTML seul sait afficher un formulaire, pas traiter les données envoyées. Nous y reviendrons.

Le conteneur : l’élément form

Tous les champs sont regroupés dans un élément form, qui porte deux attributs importants :

• action : l’adresse qui recevra les données lors de l’envoi ;
• method : la façon de les envoyer, get (données dans l’URL, pour une recherche) ou post (données dans le corps de la requête, pour un message).

<form action="https://www.exemple.org/traitement" method="post">
  <!-- les champs viennent ici -->
</form>

Label et input : un couple inséparable

Chaque champ de saisie (input) doit être associé à une étiquette (label) qui dit ce qu’il faut saisir. On relie les deux avec l’attribut for du label, qui reprend l’id du champ.

<label for="nom">Votre nom</label>
<input type="text" id="nom" name="nom" required>

Cette association rend service à tout le monde : un clic sur l’étiquette place le curseur dans le champ (zone cliquable plus grande, précieuse sur mobile), et les lecteurs d’écran annoncent la question en entrant dans le champ. N’utilisez jamais le seul attribut placeholder à la place d’un label : il disparaît dès que l’on tape et son contraste est souvent faible.

L’attribut name est tout aussi important : c’est le nom sous lequel la valeur sera envoyée au serveur. Un champ sans name n’est pas transmis.

Les types de champ

L’attribut type de input adapte le champ à la donnée attendue. Le navigateur affiche alors un clavier adapté sur mobile et contrôle le format :

Menus, zones de texte et regroupements

La liste déroulante : select

<label for="sujet">Sujet de votre demande</label>
<select id="sujet" name="sujet">
  <option value="">Choisir…</option>
  <option value="portrait">Séance portrait</option>
  <option value="reportage">Reportage</option>
  <option value="autre">Autre</option>
</select>

On peut regrouper des options avec optgroup. La valeur envoyée est celle de value, pas le texte affiché.

Le texte long : textarea

<label for="message">Votre message</label>
<textarea id="message" name="message" rows="6" required></textarea>

Cases à cocher et boutons radio : fieldset et legend

Quand plusieurs champs répondent à une même question, regroupez-les dans un fieldset et nommez le groupe avec un legend. Les lecteurs d’écran annoncent alors la question avant chaque option.

<fieldset>
  <legend>Comment avez-vous connu mon travail ?</legend>
  <p>
    <input type="radio" id="src-web" name="source" value="web">
    <label for="src-web">Sur Internet</label>
  </p>
  <p>
    <input type="radio" id="src-amis" name="source" value="amis">
    <label for="src-amis">Par des proches</label>
  </p>
</fieldset>

<p>
  <input type="checkbox" id="newsletter" name="newsletter" value="oui">
  <label for="newsletter">Je souhaite recevoir les actualités de Camille</label>
</p>

Pour que des boutons radio forment un groupe exclusif, ils doivent partager le même name. Chacun garde un id unique pour son label.

Les boutons

L’élément button déclenche une action. Son attribut type en détermine le comportement :

• type="submit" : envoie le formulaire (valeur par défaut dans un formulaire) ;
• type="reset" : remet les champs à zéro (à éviter : on l’actionne par erreur trop facilement) ;
• type="button" : ne fait rien par lui-même, on lui associera du JavaScript.

<button type="submit">Envoyer le message</button>

Rédigez un intitulé de bouton explicite : « Envoyer le message » est plus clair que « OK ».

La validation native

Le navigateur peut vérifier les saisies avant l’envoi, sans une ligne de JavaScript. Quelques attributs suffisent :

• required : le champ est obligatoire ;
• minlength et maxlength : bornes de longueur pour un texte ;
• min et max : bornes pour un nombre ou une date ;
• pattern : une expression régulière que la saisie doit respecter, accompagnée d’une explication pour l’utilisateur ;
• type="email", type="url" : contrôle automatique du format.

<label for="tel">Téléphone (facultatif)</label>
<input type="tel" id="tel" name="tel" pattern="[0-9 ]{10,14}" title="10 à 14 chiffres, espaces autorisés">

L’attribut autocomplete (par exemple autocomplete="email", autocomplete="name") permet au navigateur de pré-remplir les champs : un vrai gain de temps pour vos visiteurs, mais aussi une aide pour les personnes qui ont des difficultés de saisie.

Rendre le formulaire accessible et compréhensible

• Indiquez clairement les champs obligatoires, par exemple avec la mention « (obligatoire) » dans le libellé, plutôt qu’avec la seule couleur.
• Mettez les labels visibles à côté ou au-dessus de chaque champ.
• Prévoyez des messages d’erreur explicites (« Saisissez une adresse e-mail valide ») et pas seulement un champ qui devient rouge.
• Respectez un ordre de tabulation logique : l’ordre du code est l’ordre de navigation au clavier.
• Évitez de bloquer le collage dans un champ ou de limiter inutilement la saisie.

Et après l’envoi ? Ce que le HTML ne fait pas

Quand l’utilisateur clique sur « Envoyer », le navigateur transmet les données à l’adresse indiquée dans action. Pour que quelque chose se passe, il faut un programme à cette adresse qui les reçoit, les vérifie et les enregistre ou les transforme en e-mail. Ce programme s’exécute côté serveur et sort du cadre de ce cours.

Pour un site vitrine statique, plusieurs solutions existent : un service tiers de réception de formulaires (en vérifiant sa politique de confidentialité), la fonction de formulaire proposée par votre hébergeur, ou simplement un lien mailto: pour démarrer un message depuis le logiciel de messagerie du visiteur. Dans ce cours, nous construirons le formulaire complet, et laisserons son action volontairement générique : vous choisirez la solution adaptée à votre cas lors de la mise en ligne.

Le formulaire de contact de Camille

<section id="contact">
  <h2>Me contacter</h2>
  <form action="#" method="post">
    <p>
      <label for="nom">Votre nom (obligatoire)</label>
      <input type="text" id="nom" name="nom" autocomplete="name" required>
    </p>
    <p>
      <label for="email">Votre e-mail (obligatoire)</label>
      <input type="email" id="email" name="email" autocomplete="email" required>
    </p>
    <p>
      <label for="sujet">Sujet</label>
      <select id="sujet" name="sujet">
        <option value="portrait">Séance portrait</option>
        <option value="reportage">Reportage</option>
        <option value="autre">Autre demande</option>
      </select>
    </p>
    <p>
      <label for="message">Votre message (obligatoire)</label>
      <textarea id="message" name="message" rows="6" required></textarea>
    </p>
    <p>
      <input type="checkbox" id="rgpd" name="rgpd" required>
      <label for="rgpd">J’accepte que mes données soient utilisées pour répondre à ma demande</label>
    </p>
    <button type="submit">Envoyer le message</button>
  </form>
</section>

À vous de jouer

Créez votre propre page de contact, contact.html, avec un formulaire contenant : un nom (obligatoire), un e-mail (obligatoire), un menu pour choisir un sujet, un groupe de deux boutons radio « Je souhaite être rappelé » / « Je préfère un e-mail » dans un fieldset, un message et un bouton d’envoi. Testez la validation : essayez d’envoyer le formulaire vide, puis avec une adresse e-mail incomplète.

<form action="#" method="post">
  <p>
    <label for="nom">Nom (obligatoire)</label>
    <input type="text" id="nom" name="nom" required>
  </p>
  <p>
    <label for="email">E-mail (obligatoire)</label>
    <input type="email" id="email" name="email" required>
  </p>
  <p>
    <label for="sujet">Sujet</label>
    <select id="sujet" name="sujet">
      <option value="info">Demande d’information</option>
      <option value="devis">Demande de devis</option>
    </select>
  </p>
  <fieldset>
    <legend>Mode de réponse souhaité</legend>
    <input type="radio" id="rappel" name="reponse" value="rappel">
    <label for="rappel">Je souhaite être rappelé</label>
    <input type="radio" id="mail" name="reponse" value="email" checked>
    <label for="mail">Je préfère un e-mail</label>
  </fieldset>
  <p>
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </p>
  <button type="submit">Envoyer</button>
</form>

Votre page a maintenant une vraie structure et un vrai contenu. Dans le chapitre suivant, vous allez enfin lui donner du style grâce au CSS.