Un formulaire… c’est moche. Mais si, ne prenez pas cet air outré, il n’y a rien de plus moche et rébarbatif qu’un formulaire en ligne. Pour donner un peu de piment à vos formulaires je vous propose de découvrir une technique de développement particulière (Niceforms) qui permet de faire des beaux formulaires qui ressemblent à ça :
Selon l’auteur, les Niceforms utilisent du code standard (XHTML, CSS, DOM). Quelqu’un peut-il se charger de dépouiller le code source pour voir si c’est bien fait voir accessible ?
petit bémol : sous Internet Explorer au boulot les boutons ne fonctionnent pas !
> voir si c’est bien fait voir accessible ? Rapidement, l’extension Tidy de Firefox me dit « 1 erreur et 25 avertissements d’accessibilité ». Dans le code je vois des please select plutôt que des <label> pour les 2 premiers combos… On peut améliorer.
Effectivement, les boutons sont allergiques à IE. L’idée est interessante (rendre les formulaires moins moches), mais la méthode (substitution des vrais elements par de faux elements au comportement identique – théoriquement en tous cas) n’est peut etre pas la meilleure. Un formulaire flash n’est il pas plus simple si on cherche ce type de rendu ?
Mouaip … c’est joli, mais à l’usage c’est difficile je trouve. Les listes déroulantes ne se déroulent que si on clique bien sur la flèche et pas dans la zone de texte (l’habitude …) et on peut facilement se retrouver dans le cas ou les deux listes sont déroulées et se chevauchent, devenant illisibles et masquant les boutons au dessous (en plus pas moyen de les refermer sans faire de selection. Il suffit de cliquer les deux flèches de déroulement l’une après l’autre sans faire de choix pour voir (firefox / Windows). Bref, je ne suis pas certain de voir l’avantage par rapport à une bonne feuille de style qui elle ne casse pas les mécanismes auxquels je suis habitué. Mais j’ai peut être raté quelque chose :)
Hum… effectivement les 2 menus déroulants se chevauchent et le comportement n’est pas très plaisant à l’usage. Peut-être que Delirii a raison et qu’un formulaire sous Flash est sûrement plus rapide à faire, avec le même aspect soigné et accessible en plus (du moins un partie). /Fred
Le comportement ne reflète pas le comportement du systême, notamment avec une navigation au clavier (courant pour remplir rapidement un formulaire): le choix dans la liste déroulante ne peut pas être faite au clavier, le focus n’est pas donné aux boutons radios affichés.
L’idée est bonne à condition de s’attaquer à des formulaires simples sans évènements type onChange= », le niveau de complexité est plus élevé. Il est aussi dommage de retrouver la barre verticale des textarea sous IE, mais bon IE is IE… Sinon idéal pour le formulaire de commentaires de son blog !
C’est moins joli, mais il y a déjà moyen de faire beaucoup mieux que les bêtes formulaires habituels: http://www.themaninblue.com/experiment/InForm/index.htm http://www.sitepoint.com/article/style-web-forms-css http://www.aplus.co.yu/css/forms/?css=1 Et mon préféré: http://www.picment.com/articles/css/funwithforms/ ça valide et ça passe le test de la section 508. Que demander de mieux ?
Jep sur Ibilab.net avait proposé aussi une solution pour personnaliser les formulaires avec Javascript. http://www.ibilab.net/webdev/articles/Javascript/personnalisez-checkbox-radiobutton-8.htm
J’ai regardé rapidement le code : ce n’est pas exempt d’erreurs mais c’est standards-aware. Les différents agents (browsers) sont encore trop différents dans leur gestion des éléments de <form> pour espérer que ce genre de gadget fonctionne bien partout.
D’une manière générale, il faut être très prudent avec les éléments de formulaires web. L’utilisateur a l’habitude de voir des éléments (boutons, cases à cocher, champs texte) qui reprennent l’apparence de ce qu’il voit dans son système d’exploitation. Ceci permet d’identifier rapidement un formulaire dans une page web, et d’identifier, à l’intérieur de ce formulaire, les différents éléments et leur fonctionnalité. Et puis comme cela a rapidement été démontré dans l’exemple de ce billet, on voit que ces techniques pêchent souvent par un manque d’accessibilité (pas de navigation au clavier) et/ou des bugs visuels si on n’utilise pas la configuration prévue pour. Pour l’instant, n’ayant trouvé aucun système fiable permettant de choisir précisément l’apparence des formulaires, je préfère largement m’en tenir aux formulaires traditionnels, agrémentés de quelques pointes de CSS. Quant au formulaire Flash, pourquoi pas, mais là aussi attention à l’accessibilité. Est-il possible de parcourir un formulaire Flash avec un lecteur d’écran ?
Pour information sur certain navigateur ce genre de modification est totalement ignoré notamment sous Safari et Camino qui utilise uniquement les modèles aqua de l’OS. Je vous conseille de lire http://www.456bereastreet.com/archive/200409/styling_form_controls/
Bonjour, J’ai juste fait 3 tests rapides : – au clavier (avec Firefox) => échec – à la souris,avec Javascript désactivé => réussite – avec Lynx => réusssite Amicalement, Monique
Oups… j’ai encore oublié qu’un simple retour chariot ne provoquait pas un retour à la ligne… désolée pour cette présentation désastreuse :-( Amicalement, Monique
Sous Opera, c’est la cata !
Moi je trouve ça plutôt agréable à l’oeil, et il marche plutôt bien ce formulaire. Pour des gros projets c’est p’têt pas optimum comme technique mais pour des sites « modestes » il me semble que ça peut très bien fonctionner.
Hello,
j’ai essayé de voir un exemple, mais à priori il y’a un problème avec IE :S