IE6 n'aime pas les boutons
Par Laurentj le dimanche, janvier 20 2008, 01:12 - Technologies Web - Lien permanent
Pour faire des boutons, il y a une balise sympa en HTML : <button>. On peut s'en servir notamment pour les boutons d'envoi de formulaire :
<button type="submit" name="validation" value="save">Enregistrer</button>
Comme vous le voyez, l'avantage par rapport à un <input type="submit">, c'est que l'on peut spécifier une valeur, que l'on recevra coté serveur. Et au niveau du libéllé, on peut en principe mettre n'importe quoi : du texte, d'autres balises HTML... C'est particulièrement sympa quand vous avez plusieurs boutons d'envoi :
<button type="submit" name="validation" value="save">Enregistrer</button> <button type="submit" name="validation" value="prev">Prévisualiser</button>
Coté serveur, en PHP par exemple, on a juste à tester la variable $_POST['validation'] par rapport aux valeurs "save" et "prev", afin de savoir quoi faire.
J'avais donc choisi d'utiliser ces boutons dans jForms, le système de formulaire de Jelix. Et ça fonctionne parfaitement dans Firefox, Konqueror, IE7 et certainement Opera. Mais je viens de faire machine arrière, à cause de bugs dans IE6 que l'on m'a rapporté.
Le premier bug, c'est que IE6 n'envoie pas la valeur que l'on met dans l'attribut value, mais le contenu de la balise button. Elle a donc le même fonctionnement que input dans IE6. C'est un bug que j'ai pu contourner dans jForms. Mais IE6 n'avait pas fini de me donner du fil à retordre.
En effet, quand plusieurs boutons ont le même nom, il renvoi toujours le libellé du dernier bouton, quel que soit le bouton sur lequel on clique ! Je me suis alors dit, bon, je ne vais pas appeler les boutons avec le même nom, et je vais faire du bidouillage dans jforms pour que dans jelix, on ait les valeurs sous un même nom. Mais voilà, peine perdue : quand on clique sur un bouton submit, IE6 envoit non seulement le libellé de ce bouton, mais aussi les libellés de tout les autres boutons submit qui n'ont pas le même nom ! Il est comique IE6 n'est ce pas ?
Conclusion : la balise <button> est inutilisable à cause de IE6, car encore largement répandu. J'ai donc à regret mis des <input type="submit"> dans jForms :-(
Commentaires
http://www.dansimard.com/not_tested_in_ie/ :siffle:
Oui, je sais, l'accessibilité c'est aussi prendre en compte les victimes de ce sous-navigateur, mais bon.
Et si tu transformes la page grace au google code de la page http://code.google.com/p/ie7-js/, ça marche pas ?
Pour avoir été confrontés à ces problèmes, il y a le même souci avec les
<input type="image">IE (6 et/ou 7 je ne sais plus) ne postes pas non plus le contenu de l'attribut values. C'est particulièrement gênant, quand on en a plusieurs, pour déterminer lequel a été choisi par l'utilisateur.
Ouais c'est vraiment chiant ces bugs d'IE 6 avec l'élément button. J'avais vu passer cet article (certains commentaires sont très intéressant) :
http://particletree.com/features/rediscovering-the-button-element/
On peut éventuellement fixer le comportement avec un bout de js et du conditionnal comment mais bon... j'ai renoncé à utiliser cet élément tant qu'IE 6 est encore largement utilisé.
@niko : mon coté intégriste des standards serait content de pouvoir apposer ce logo et virer ma partition windows. mais mon coté pragmatique me conseille vivement de ne pas le faire :-)
@sebastien : je me méfie de ces scripts comme ie7, parce que ça cause parfois d'autres bugs comme celui-ci : ce script ie7 fait faire des comportements étrange au bouton quand il y a une quote dans le nom du bouton !
J'ai pu constater que sur site disposant d'un grand nombre de visites uniques, et qui est orienté grand public, les stats sont d'environ 50/50 entre IE6 et IE7. IE7 gagne des parts de marché sur IE6 bien entendu. L'inversion de tendance semble rapide (IE7 est une mise à jour de sécurité de Windows). Peut être que l'on pourra utiliser la balise <button> dans 6 mois...
J'ai eu exactement le même problème il y a quelques années lorsque je développais un mini-cms, coup pour ne pas me faire chier, j'ai fais ça :-P :
if(stristr($_SERVER"HTTP_USER_AGENT", 'MSIE'))
{ exit("<p class=bad>L'utilisation d'internet Explorer est proscrite pour une question de sécurité.<br>Vous pouvez utiliser n'importe quel navigateur moderne au choix : Mozilla Firefox, Opera, Safari, etc.</p> </body></html>");
Quand Biactol ou l'Eau Précieuse ne donnent aucun résultat, rien de tel qu'un bon ravalement de façade : use Firefox ! Ou au pire, IE7.
Et en + Bill prend sa retraite :)=
Par contre l'idée de CyberSDF n'est pas mauvaise en soi, identifes le navigateur et selon qui il est, utilises telle ou telle balise.
Mais tu peux aussi spécifier la valeur d'un élément input de type submit, et si mes souvenirs sont bons, tu la recevras bien (même avec IE6) : <input type="submit" name="Action" value="Approve" /> <input type="submit" name="Action" value="Reject" />
@Yogi : comme je le dit, le problème c'est que le value ici, c'est le label. Or sur un site multilingue, le label peut être différent d'une langue à une autre. C'est donc lourdingue à gérer coté serveur.
Cependant le kamelot blog vient de me donner une astuce interressante (voir le trackback)
Waouh je pensais pas que de rapporter ce bug ça créerait autant de remous ! Je suis content de voir que tu prends très au sérieux les user requests :)