Les faux contrôles de formulaires

De temps en temps, je reçois une maquette avec un formulaire à intégrer qui contient quelque chose comme ça :

Ceci est une liste déroulante personnalisée. C’est vachement pratique pour repérer les webdesigners débutants, les graphistes print qui font du web, ou encore les webdesigners qui pensent que le design est la finalité d’une page web (indice : ce n’est pas le cas).

Si vous êtes intégrateur, vous savez déjà que vous allez devoir faire quelque chose de très sale pour arriver à ce résultat graphique. Les contrôles de formulaires sont par défauts très limités à modifier en CSS. Ceci est dû au fait que ce sont en fait des éléments remplacés par le navigateur par des contrôles propres au système d’exploitation. L’avantage, c’est que le formulaire pourra s’adapter au fonctionnement du système d’exploitation. Par exemple sur iOS, vous aurez droit à la roue du juste prix. L’inconvénient, c’est que vous êtes assez limité au niveau de la présentation.

CSS3 apporte quelques solutions (notamment avec la propriété appearance), mais on est loin d’une solution universelle. La moins pire des solutions à l’heure actuelle consiste à utiliser du JavaScript pour remplacer les contrôles de formulaire par de faux contrôles. La bibliothèque Uniform (en jQuery) fait ça plutôt bien.

Mais ça implique d’énormes compromis. Il y a quelques semaines, Aviv Ben-Yosef rappelait sur son blog pourquoi il faut éviter les faux contrôles de formulaires en HTML.

Voici une liste des pour et contre de l’utilisation de tels contrôles graphiques.

Pour : 

• C’est joli.

Contre :

• Ça alourdit le temps de téléchargement de la page, et donc aussi le nombre de requêtes.
• Ça ralentit le chargement de la page côté client. Vous devrez attendre que tous vos scripts soient chargés avant de pouvoir utiliser votre formulaire.
• Ça diminue l’ergonomie de votre site. Les contrôles de formulaires système ont l’avantage d’être familiers pour les internautes. Même si vous avez fait une charte de liste déroulante super jolie et ergonomique, ça demandera du temps de compréhension supplémentaire à vos visiteurs.
• Ça réduit l’interopérabilité de votre site. Oui, ça fonctionne bien sur les machines à l’heure à laquelle vous avez développé votre site. Mais rien ne vous garantit que ça ne fonctionnera encore sur les machines de demain.
• Ça détruit l’accessibilité de votre page. Les faux contrôles générés en HTML deviennent totalement inutilisables.
• Ça a un impact sur le temps d’intégration, et donc le coût de votre projet.

Par pitié, n’imposez pas ça à vos visiteurs.