Bouton d'envoi de formulaire manquant

Chaque formulaire a besoin d'un moyen d'envoi explicite et repérable : un véritable <button type="submit"> ou <input type="submit">. Les formulaires conçus pour n'être envoyés que par un gestionnaire JavaScript rattaché à un élément générique non prévu pour cela (une <div> mise en forme avec un onclick, par exemple) peuvent priver les personnes au clavier de tout moyen fiable de déclencher l'envoi, et privent tout le monde d'un signal clair et conventionnel indiquant « c'est ainsi que je termine ce formulaire ».

Pourquoi une véritable commande d'envoi compte

Les boutons d'envoi natifs apportent un comportement intégré facile à perdre lorsqu'un formulaire n'est envoyé que par du JavaScript sur mesure : appuyer sur Entrée depuis n'importe quel champ texte du formulaire déclenche automatiquement un vrai bouton d'envoi, comportement que chacun a appris à attendre de pratiquement tous les formulaires. Un formulaire qui ne s'envoie que par le clic sur un élément sur mesure rompt cette attente - et si cet élément n'est pas un véritable bouton focusable au clavier (voir Composants inaccessibles au clavier), les personnes au clavier peuvent n'avoir aucun moyen de l'envoyer.

La correction

<!-- Avant : aucune commande d'envoi réelle, tout repose sur un clic sur une div générique -->
<form id="inscription">
  ...
  <div class="submit-btn" onclick="submitForm()">S'inscrire</div>
</form>

<!-- Après : un véritable bouton d'envoi -->
<form id="inscription">
  ...
  <button type="submit">S'inscrire</button>
</form>

Un véritable <button type="submit"> peut recevoir toute la mise en forme voulue par la maquette et déclencher du JavaScript sur mesure (via l'événement submit du formulaire) : utiliser le bon élément n'oblige à renoncer ni au comportement ni à l'apparence.

Où cela se rencontre

Les formulaires d'applications monopages faits main et les tunnels de commande fortement pilotés par JavaScript en sont la source la plus fréquente : en construisant l'envoi entièrement en JavaScript, on omet parfois l'élément d'envoi natif parce que la gestion d'événements du framework n'en a pas strictement besoin pour une personne utilisant la souris - en oubliant qu'il reste nécessaire à la prise en charge complète du clavier et de la touche Entrée.

Références officielles

• Technique W3C H32