Browser differences: form submission

These are two issues I don't remember I've observed till now. First
I've noticed submitting a form through an <INPUT type="image">
Mozilla and Safari has one behavior while with Opera and IE it has
another:

<form action="">
<input type="image" alt="Test" src="..." name="foo" value="bar">
<input type="text" name="abc">
</form>

When the image button is clicked, Mozilla and Safari submit
'foo.x=#', 'foo.y=#' and 'foo=bar' name/value pairs while Opera and
IE submit only 'foo.x=#' and 'foo.y=#'. Reading through the HTML
spec I haven't found if IE and Opera are wrong in not sending
'foo=bar' along but I find it convenient (and often used) to have it
for testing which out of multiple submit buttons has been activated.
Opera and IE send only the 'name.x' and 'name.y' pairs even when
the image button is activated using the keyboard, i.e. not using a
pointing device. Which of the browsers in this case are right, or
all of them?

While the previous case is not clear to me I find the following to
be faulty with both Opera and IE: they always place the 'foo.x=#'
and 'foo.y=#' pairs after the 'text=...' one while following the
rules [1] they should keep the order the controls appear in the
document.

Because of the given discrepancies I've decided to use a <button>
with an <img> inside, but then I've hit the following problem
apparent only with IE (6.0, can't try 7.0 at the moment):

<form action="">
<button type="submit" name="foo" value="Test 1">
<img alt="Test 1" src="...">
</button>
<input type="submit" name="bar" value="Test 2">
<input type="text" name="abc">
</form>

IE always submits all <button> controls no matter which submit
button has been activated, moreover it uses the content of the
<button> element as the control value instead of the 'value'
attribute (while the later is not that important to me in this
particular case).

After all, seems using image-submit buttons and <button>s in a form
with other submit buttons could cause quite few compatibility problems.

[1] Form content types
<http://www.w3.org/TR/html401/interact/forms.html#submit-format>:

application/x-www-form-urlencoded

2. The control names/values are listed in the order they appear
in the document.

multipart/form-data

A "multipart/form-data" message contains a series of parts, each
representing a successful control. The parts are sent to the
processing agent in the same order the corresponding controls appear
in the document stream.

--
Stanimir

Scripsit Stanimir Stamenkov:

These are two issues I don't remember I've observed till now. First
I've noticed submitting a form through an <INPUT type="image"
Mozilla and Safari has one behavior while with Opera and IE it has
another:

That has been a known issue for years, and it's one of the reasons
(though far from the most important) why image submit buttons should
almost never be used.

Reading through the HTML
spec I haven't found if IE and Opera are wrong in not sending
'foo=bar' along

The specifications are obscure in this issue. The old interpretation was
that it is not to be sent.

but I find it convenient (and often used) to have it
for testing which out of multiple submit buttons has been activated.

Of course it cannot be used for that purpose, since IE does not send it.

There is, in general, no way to know which of multiple submit buttons
was used, if a form contains a text input field. You might guess mostly
right if you assume that hitting Enter in that field, if it submits the
form, will make the browser act as if the first button had been used.
But there is no guarantee; it's all on your own risk.

The conclusion is that a form should have only one submit button, at
least if it has a text input field, or (sometimes, in the case of very
long forms) submit buttons with identical effect. Thus, the choice
between actions should be made using radio button controls, for example.
In this approach, the problem you describe vanishes in a puff of logic.

While the previous case is not clear to me I find the following to
be faulty with both Opera and IE: they always place the 'foo.x=#'
and 'foo.y=#' pairs after the 'text=...' one while following the
rules [1] they should keep the order the controls appear in the
document.

That rule should not be relied on anyway. It is simply unnecessary, in
form data processing, to assume that fields appear in a particular
order. Besides, many low-level form data processing routines (which
parse the form data into e.g. a table or hash) lose the order anyway.

Because of the given discrepancies I've decided to use a <button
with an <img> inside,

Digging deeper?

IE always submits all <button> controls no matter which submit
button has been activated, moreover it uses the content of the
button> element as the control value instead of the 'value'
attribute

That absurdity has given people many laughs. Just don't use <button>.

Use <input type="submit" ...>, and don't try to style it much. (Authors
who hate "ugly grey buttons" typically end up with producing something
worse. Besides, newer browsers have fairly nice default rendering of
buttons - but styling by authors easily destroys this.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/