5007 sujets

Sémantique web et HTML

Bonjour,

J'ai un formulaire dans lequel se trouve une liste d'objet. Sur chacun de ces objets, je peux effectuer une action du style "modifier l'objet x". J'ai donc naturellement utilisé des <button type="submit"> avec un attribut "value" différent pour chacun de mes objets:


<form method="post" action="machin.php" ... >
...
<button type="submit" name="modifier" value="1">Modifer "gudule"</button>
...
<button type="submit" name="modifier" value="2">Modifer "truc"</button>
...
<button type="submit" name="modifier" value="3">Modifer "chose"</button>
...
</form>


Ceci me permet, contrairement au comportement d'un <input type="submit">, de présenter à l'utilisateur une indication plus parlante quant à l'action déclenchée qu'un nombre tout droit sorti d'une base de données.

Tout allait donc pour le mieux dans le meilleur des mondes, jusqu'à ce que par acquis de conscience, je teste mon oeuvre avec Internet Explorer, cette andouille.

Donc sachez-le, si vous utilisez plusieurs éléments <button>s de type "submit" dans un même formulaire, Internet Explorer 6 se comporte de la façon suivante :
1 - Il envoie une valeur pour tous les <button>s du formulaire, quelque soit celui que l'utilisateur a choisi d'activer. En pratique, côté serveur, vous obtenez la valeur correspondant au dernier bouton (dans l'ordre du flux HTML) du formulaire.
2 - La valeur qu'il envoie correspond au code HTML (reformatté à sa sauce) compris entre les deux balises de l'élément <button> et absolument pas, comme on s'y serait attendu, à la valeur de l'attribut "value".

Internet Explorer 7 beta 2 preview du 20 mars, n'envoie lui que la valeur du bouton effectivement utilisé pour soumettre le formulaire, mais hélas, trois fois hélas, la valeur envoyée est toujours le code HTML (toujours reformatté) compris entre les 2 balises.

Firefox et Opera réagissent comme on s'y serait attendu, à savoir qu'il envoient la valeur de l'attribut "value" du bouton utilisé pour soumettre le formulaire.

Les solutions que j'entrevois sont les suivantes :
- utiliser un <input type="image"> qui ne sert pas à cela en théorie,
- bidouiller en javascript (erk!),
- faire un lien en passant mes variables dans l'url (re-erk).
- servir un <input type="image"> à internet explorer et un <button> aux autres. (en supposant qu'IE soit le seul à avoir ce comportement.)

Quelqu'un entrevoit-il une autre solution ?
Y'a t'il d'autres navigateurs avec lesquels l'élement <button> pose ce problème ?
Que dit la spécification ? Je ne suis pas sûr qu'elle soit aussi claire au sujet de <button type="submit">, qu'à propos de son son cousin <input type="submit">.
Lanza a écrit :
Que dit la spécification ? Je ne suis pas sûr qu'elle soit aussi claire au sujet de <button type="submit">, qu'à propos de son son cousin <input type="submit">.

Sans grande surprise, Internet Explorer a tout faux. Selon les specifications HTML4 concernant l'élément button c'est bien la valeur de l'attribut value qui devrait être envoyée au serveur au moment de la soumission :
<!ELEMENT BUTTON - -
     (%flow;)* -(A|%formctrl;|FORM|FIELDSET)
     -- push button -->
<!ATTLIST BUTTON
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
[#red]  value       CDATA          #IMPLIED  -- [b]sent to server when submitted[/b] --[/#]
  type        (button|submit|reset) submit -- for use as form button --
  disabled    (disabled)     #IMPLIED  -- unavailable in this context --
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  >


À noter que c'est un comportement parfaitement volontaire et assumé de la part de Microsoft, comme le prouve cette page de MSDN décrivant l'élément button (voir tout en bas) :
a écrit :
When the BUTTON element is submitted in a form, the innerText value is submitted.


Et dire que juste en dessous, sur la même page il y a un lien vers les specifications HTML4...
IE fera décidément toujours autrement que les autres.
C'est toujours bon à savoir, j'utilise énormément les buttons, par facilité à leur attribuer un style CSS.
djfeat a écrit :

À noter que c'est un comportement parfaitement volontaire et assumé de la part de Microsoft, comme le prouve cette page de MSDN décrivant l'élément button (voir tout en bas) :
When the BUTTON element is submitted in a form, the innerText value is submitted.


Et dire que juste en dessous, sur la même page il y a un lien vers les specifications HTML4...

Je ne vois pas à quoi peut servir un tel comportement. Smiley ohwell

Et je viens de jeter un oeil sur les <input type=image> selon microsoft :
a écrit :
Any value property is ignored.


Bref, je ne peux pas remplacer mon button par un input image...
Argh!

Ils ont fumé quoi les développeurs d'IE ?
Lanza a écrit :

Je ne vois pas à quoi peut servir un tel comportement. Smiley ohwell

Et je viens de jeter un oeil sur les <input type=image> selon microsoft :
Any value property is ignored.


Bref, je ne peux pas remplacer mon button par un input image...
Argh!

Ils ont fumé quoi les développeurs d'IE ?

Rien ! Mais c'est du crosoft ... faut être prévenu.
Entièrement d'accord que ce comportement est complètement inutile.
Parce que tu crois qu'ils s'amusent à perdre leur temps à lire les millions de rapports de bug qu'ils reçoivent chaque jour ? ça m'étonnerait beaucoup.

En tout cas quand windows me propose d'envoyer un rapport d'erreur, je clique systèmatiquement sur "Ne pas envoyer"...
voir lien:
http://fr.selfhtml.org/html/formulaires/boutonsacliquer.htm#modernes

perso, je me suis pris pas mal la tête au début avec çà pour faire des boutons d'action, et je comprends un peu microsoft: il ne pourrait y avoir qu'un seul bouton pour envoyer le formulaire concerné...
les boutons qui font autre chose que soumettre le formulaire tel quel devraient plutôt prendre l'attribut
type="button" onClick="..."

mais sinon:

<button type="submit" name="modifier_gugule">Modifer "gudule"</button>
<button type="submit" name="modifier_truc">Modifer "truc"</button>
<button type="submit" name="modifier_chose">Modifer "chose"</button>

du coup, pour déclencher des actions, je me suis fais une fonction simple en javascript qui envoit un formulaire après avoir cliqué sur un lien, en changeant au passage la valeur d'un champ input hidden
...
Bonjour à tous!

Je viens de m'inscrire à ce forum, dans le but d'apporter (peut-être) ma contribution à
un problême délicat: MSIE (#@!).

je connais le site AlsaCréations depuis plus d'un an et j'ai même acheté le livre qui est un très bon ouvrage de référence sur les CSS2 pour tout Webmaster qui se respecte. Mais venons en au fait.

MSIE n'est pas très collaboratif en ce qui concerne le bon traitement des boutons personnalisés. J'utilise la plupart du temps (dans les sites que je conçois) la balise <input type="submit" name="compo[]" ... /> afin de profiter du dynamisme dans la programmation de ces boutons. Je me suis aperçu que lorsqu'on affecte une image au bouton
<input type="image"... />, tout fonctionne bien avec fireFox, mais il en va autrement pour IE qui 'empêche' la résolution du comportement.

Alors que faire? Utiliser JavaScript (et perdre la satisfaction de ne pas utiliser une ligne de code JS dans mes scripts)? Renoncer à développer des sites sous IE (tentant mais peu envisageable)? Laisser tomber (et renoncer à son gagne-pain)?

La réponse semble venir de la CSS. Le bouton peut être définis comme d'habitude:
<input type="submit" name="compo[]" value="valeur1" />

Puis dans la CSS on définis le style:

input
{
cursor: pointer;
width: 20px;
height: 20px;
font-size: 0px;
color: #...;
background-image: url(Url_de_l'image_bouton);
border: 0;
}

Explication:

On doit donner une dimension au bouton (width et height) qui se trouvent être les dimensions exacte de la bitmap. Pourquoi me direz-vous alors qu'il suffirait de mettre un 'no-repeat' dans la valeur de 'background-image'?
tout simplement parceque ça ne fonctionne pas.
Pour la même raison, la présence de 'border' permet l'affichage de la bitmap (sans ça elle reste invisible). Pour pouvoir transformer le curseur en main au survol du bouton, on ajoute 'cursor: pointer;'. En ce qui me concerne, le bouton devait être purement grahique. Je me suis donc débrouillé pour mettre le texte à zéro en taille et à fondre les 3 pixels qui en résultait par une couleur correspondant à la bitmap.

Pour éviter les problèmes, je fais une détection du type de navigateur afin d'y associer une feuille de style optimisée pour FireFox ou pour IE (car on sait que les incompatibilités entre eux sont légions).

Cette solution a été testé avec msie 6.

Voilà. J'espère que ça pourra aider quelqu'un bien que la date de ce topic commence à être ancienne et que entretemps quelqu'un à peut-être trouvé une meilleure solution.

Tchaô à tous et bon courage!
Bonjour,

Je viens de lire tous vos post sur ce sujet et je me pose la question suivante :

Est-ce qu'il est forcément nécessaire de mettre une valeur sur le bouton de type "submit". Si on utilise PHP et qu'on récupère les données du formulaire via les methodes "_GET" et "_POST", ça ne devrait pas poser de problème, non ?
L'attribut value du submit est en fait le p'tit texte affiché sur le bouton. Par contre, t'es pas obligé d'y mettre un name. Si pas de name, rien dans get ou post
EricLB a écrit :
Bonjour,

Je viens de lire tous vos post sur ce sujet et je me pose la question suivante :

Est-ce qu'il est forcément nécessaire de mettre une valeur sur le bouton de type "submit". Si on utilise PHP et qu'on récupère les données du formulaire via les methodes "_GET" et "_POST", ça ne devrait pas poser de problème, non ?


Si tu pensais à ça :
<button type="submit">Envoyer</button>
C'est en effet tout à fait correct et c'est ce que j'utilise tout le temps : ça n'envoie pas de valeur correspondant au bouton et c'est très bien : elle ne sert à rien de toute façon...
OUi c'est exactement ça !
Du coup bcp plus simple a designer en CSS que les input, qui de toute façon ne peuvent être modifiés par les feuilles de style dans Safari et Konqueror.
ça peut avoir son intérêt ...
il m'est arrivé de faire l'affichage et le traitement d'un formulaire dans un même fichier et je switchais en affichage ou en traitement si $_POST['submit'] était définie ou non...

L'autre avantage que j'y vois est que je peux avoir plusieurs boutons submit, notamment pour l'aperçu et l'envoi.
Malcolm a écrit :
ça peut avoir son intérêt ...
il m'est arrivé de faire l'affichage et le traitement d'un formulaire dans un même fichier et je switchais en affichage ou en traitement si $_POST['submit'] était définie ou non...
Mouais, mais ça marche aussi avec toutes les autres valeurs renvoyées par le formulaire, ça Smiley murf
Modifié par Sopo (18 Oct 2006 - 12:42)
Dites moi si je me trompe mais les

<input type="button" 'onclick="if (window.confirm('...')){this.form.submit()}else {return false;}" />

sur IE7 CA MARCHE PAS ! jsuis dégouté ...

----
Ok, le problème était que j'avais le texte suivant : <a href="..." 'onclick="...">
donc sous firefox ok mais ie ca le dérangeait le ' (et je comprends) Smiley smile
Modifié par wouaren (20 Oct 2006 - 09:53)
Lanza a écrit :
...
Quelqu'un entrevoit-il une autre solution ?
...


Pourquoi ne pas utiliser un liste de bouton radio, puis un seul et unique submit ? Tu récupères la variable passée via le bouton selectionné, et ton script sait quelle opération il doit effectuer.
Modifié par fredmac (19 Oct 2006 - 21:31)
Entièrement d'accord, ou alors une liste déroulante. Je trouve que c'est beaucoup plus clair que plusieurs boutons submit.