Des menus déroulants à choix multiples sans select

On se retrouve tous un jour ou l’autre confronté au problème de questions à réponses multiples et encore plus nombreuses, sans possibilités de filtrage préalable. Dans ce cas, la première solution qui vient à l’esprit est celle du menu déroulant à choix multiple, et elle peut sembler alléchante à plus d’un point de vue.

Grave erreur ! Il n’y a pas pire pour votre utilisateur que cette extension de notre bon vieux select, dont j’avais sérieusement remis la fiabilité en question il n’y a pas si longtemps que cela. Je me suis rendu compte à mes dépends que les menus déroulants à choix multiples étaient aux formulaires ce que le blink et les gifs animés étaient aux pages web des années 90 : une plaie.

On fait tous des conneries, et moi le premier. Confronté à des formulaires dans lesquels je rencontrais de nombreux champs à réponse multiple sans aucun contrôle de ma part sur leur nombre, j’ai mis du menu déroulant partout, persuadé de détenir la bonne méthode. Horreur, malheur, dirait la sorcière si elle était là, le truc s’avère épouvantable à utiliser.

<li>Un clic de souris à coté, et on perd toute sa sélection.</li>
<li>La sélection de cases non adjacentes relève du défi olympique.</li>
<li>Difficile à styler, on s'y perd facilement entre les réponses.</li>

J’ai cherché un moment avant de trouver une solution satisfaisante vues les contraintes qui m’étaient imposées :

<li>Un nombre infini de réponses potentielles.</li>
<li>Accessibilité totale, donc pas de javascript.</li>
<li>Facilement personnalisable.</li>

La solution

Pas besoin de chercher bien loin. Remonter à l’origine du problème et aux avantages apparents de la solution choisie devaient me permettre de prendre la bonne direction.
Dans un formulaire, la première chose à laquelle on pense quand il s’agit de réponses multiples, c’est “cases à cocher”. Malheureusement, celles-ci deviennent rapidement impossible à afficher au delà de quelques éléments. D’où l’utilisation du menu déroulant à choix multiple, dont l’ascenseur permet d’occuper un minimum de place, mais au détriment de l’utilisabilité.

Il me fallait donc combiner les avantages des cases à cocher et des menus déroulants à choix multiples, sans sacrifier à l’accessibilité :

<li>Espace à l'écran restreint.</li>
<li>Réponses multiples.</li>
<li>Nombre de réponses indéfini et potentiellement infini.</li>

Pour cela, je commence par englober mes réponses dans une div dont je force la hauteur et à laquelle j’attribue la propriété CSS overflow-y : auto. Voilà pour la partie déroulante.

J’ajoute ensuite une série de label dans lesquels j’englobe ma case à cocher. Si je trouve ça sémantiquement moyen – le label désigne le champ de formulaire, ce dernier ne saurait donc y être inclus – c’est structurellement valide. J’applique ensuite à chacun de mes labels la propriété CSS display: block

Ce dernier point est très important. En effet, si l’id de la case à cocher et la propriété for= du label sont renseignées correctement, la sélection du champ quand je clique sur le label s’étend à toute la ligne. Pratique non ?

Il ne me reste qu’à mettre un peu de couleur une ligne sur deux pour bien différencier les réponses, et le tour est joué. Évidemment, le résultat présenté est tout sauf joli, mais je vous rappelle que mon sens artistique avoisine le zéro absolu.

Télécharger le code source de l’exemple.

Si cet article vous a plu, n'hésitez pas à me suivre sur Twitter.

12 commentaires sur Des menus déroulants à choix multiples sans select »

1. 

   Par David, biologeek le 24 mai 2007 à 01h30 :

   
   

   La même solution en un peu plus vendeur :

   http://c82.net/samples/checklist-samples.html

2. 

   Par Moe le 24 mai 2007 à 01h32 :

   
   

   Voilà un article très intéressant. J’ai essayé d’arriver au même résultat en excluant la cible du du et en utilisant une liste, car pour moi une liste a plus de sens qu’une succession de . Le résultat est un échec, ta solution à base de faisant office de bloc n’a pas de “sens” mais elle fonctionne. On pourrait ajouter un peu de sens à ton exemple en utilisant

   à la place du
   et entourer les de

   .

   PS : dans ton exemple, il y a 2 fois l’élément 15.

   • 

     Par Country le 24 mai 2007 à 02h08 :

     
     

     Le résultat est très sympa en effet. J’aurais juste quelques remarques :

     • Sémantiquement parlant, je trouve qu’une liste serait plutôt mieux appropriée qu’un div pour faire ce “menu”.

     • Je vois que tu utilise overflow-y, malheureusement elle ne fonctionne pas sous Opéra (il s’agit d’une propriété propriétaire d’IE même si elle est, à ma connaissance, implémentée dans Firefox et est prévue dans la spécification CSS3). Donc en attendant je lui préfère overflow en veillant bien à ne pas avoir d’ascenseur horizontal.

   • 

     Par Alban le 24 mai 2007 à 07h24 :

     
     

     Sympa comme astuce, mais il semble qu’Opera a des soucis pour afficher correctement le div qui les englobe. Dommage :(

   • 

     Par Frédéric de Villamil le 24 mai 2007 à 07h44 :

     
     

     David : Je ne connaissais pas, c’est effectivement plus sympa.

     @les autres : j’avais commencé par une liste qui était nettement plus correcte sémantiquement, mais rajoutait énormément de markup en contrepartie.

     Je n’ai pas testé sous Opéra, mais je pense qu’on peut y arriver avec des listes en utilisant un overflow : scroll sur les ul et en fixant la largeur des li avec un overflow: hidden. Je testerai cet exemple ce soir en rentrant.

   • 

     Par Nath le 24 mai 2007 à 08h48 :

     
     

     Bien vu. Par contre, ça enlève un avantage de la liste déroulante (ou plutôt déroulée :) , c’est qu’on ne peut plus sélectionner plusieurs items adjacents avec la touche majuscule.

     Peut-être qu’avec un peu de javascript non-intrusif, on pourrait redonner cette fonctionnalité.

   • 

     Par Damien le 24 mai 2007 à 08h56 :

     
     

     C’est effectivement la seule solution viable pour tous les utilisateurs (avancés ou non). Personnellement, je rajoute un tout petit bout de javascript pour que les lignes cochées soient d’une couleur différentes. Pour ceux qui ont javascript activé, ça améliore l’utilisabilité et pour les autres ça n’empêche pas le fonctionnement.

   • 

     Par Bertrand le 24 mai 2007 à 10h52 :

     
     

     Dans le même genre chez google base … http://base.google.com/base/s2?a_n0=events+and+activities&a_y0=9&hl=en&gl=US

   • 

     Par caedes le 24 mai 2007 à 16h07 :

     
     

     Cette “astuce” existe déjà depuis qqs temps sur l’admin de Wordpress…

   • 

     Par Canardo le 24 mai 2007 à 17h37 :

     
     

     Bonne idée tout ça. Mais c’est vrai qu’on perd la compatibilité d’Opera. C’est embêtant. Par contre la page indiquée dans le 1er message par David semble régler ce probleme : http://c82.net/samples/checklist-samples.html

   • 

     Par Samuel MARTIN le 25 mai 2007 à 10h47 :

     
     

     Oui en effet sous Opera.. j’ai pas de menu déroulant, je vais essayer l’astuce proposé.

   • 

     Par Eric - SuperFiction le 25 mai 2007 à 23h31 :

     
     

     Sinon, il y a une autre astuce utilisée sur Meetic que j’avais présentée sur un de mes billets : http://www.superfiction.net/blog/index.php?2007/02/27/117-astuce-interessante-pour-les-longs-formulaires

     Ok, c’est du bricolage et sémantiquement ce n’est pas au top, mais ça a les avantages dont tu parles, plus le fait de pouvoir être intégralement fermé (et donc de prendre encore moins de place dans son état par défaut)

Trackbacks sur Des menus déroulants à choix multiples sans select

Les trackbacks sont fermés pour cause de spam.