Le Coin Web de QuentinC - Formulaires : Les listes déroulantes et l'évènement onchange

Formulaires : Les listes déroulantes et l'évènement onchange

Cet article vous présente le revers de la médaille à l'utilisation de lévènement onchange et la validation automatique sur les listes déroulantes select.

Toujours dans le top ten des erreurs de conception des formulaires, on trouve aussi ceci :

Ce code a un but fort simple : dès que l'utilisateur sélectionne une option dans la liste déroulante select, le formulaire est automatiquement envoyé. Tant que vous pouvez utiliser votre souris convenablement, cette soumission est très pratique : pas besoin de s'ennuyer avec un bouton OK. Mais voilà : quand vous utilisez exclusivement le clavier pour sélectionner une option, à peine vous avez appuyé sur la touche flèche haut ou bas que le formulaire est déjà soumis, sans même que vous ayez eu le temps de voir l'intitulé de l'option ainsi validée à votre insu. ET que va dire celui qui a cliqué sur la mauvaise option ?

« D'accord, alors je mets un setTimeout de 10 à 20 secondes, pour retarder la soumission ! »

Eh bien non ! Là, ça sera l'inverse : quand vous sélectionnerez une option au clavier, vous serez heureux d'avoir eu le temps de lire la destination, mais l'utilisateur de souris sera frustré parce qu'il va penser : « Je clique et ça ne réagit pas, il y a un problème ! ».

Donc en conclusion, mettez un bouton OK à disposition, comme ça vous simplifiez la vie à tout le monde.

Attention ! IL ne faut pas pour autant bannir complètement l'évènement onchange. IL se révèle notamment utile dans le cas où les éléments d'une autre liste déroulante dépendent de la sélection dans la première liste, ou dans celui où une certaine option modifie l'éventail des choix disponibles ailleurs dans le formulaire.

Pour vous aider à savoir quand vous pouvez utiliser onchange ou pas, voici un petit point de repère : si la réaction à l'évènement onchange doit déplacer le focus ailleurs dans la page ou changer de page, il y a de fortes chances pour qu'il empêche la sélection au clavier, et que, par conséquent, il n'est pas judicieux de l'utiliser.

Vous êtes ici : Accueil > Référence HTML et JavaScript > Formulaires : Les listes déroulantes et l'évènement onchange

Dernière modification de cette page : Dimanche 23 avril 2006 19:09
Haut de page  •  Contact  •  RSS  •  Valide XHTML 1.0