Input type="image" value not present, replaced by x,y coordinates

If you're reading this, you may have noticed (as we did) that relying on the value returned from <input type="image"> is breaking your forms. This isn't a bug. It appears to be a new 'feature' in FireFox 4, which actually makes the browser compliant with the HTML 5 standard, instead of the older HTML 4.01 standard.

Check: HTML 4.01 Standard
Check: HTML 5 Standard

The new behavior gives you the X and Y coordinates of where the user clicked on the button element.

1
2
3
<form method="get">
    <input type="image" name="myButton" value="Submit" src="images/submit.gif" />
</form>

Old output:

1
?myButton="Submit"&myButton.x=5&myButton.y=10

New behavior:

1
?myButton.x=5&myButton.y=10

This result is bad if you use images as your "Submit" action and rely on the value of the input to catch the user's intention. For example, you might have an edit and a delete button on a field and your handler changes based on the value of the submit button.

The workaround:

Use CSS like the following on an <input type="submit" /> to give it an image appearance.

1
2
3
4
5
6
7
8
9
input.myClass {
    border: none;
    cursor: pointer;
    display: block;
    text-indent: -3000px;
    background: url(../images/submit.gif) no-repeat 0 0;
    width: 17px;
    height: 11px;
}

One Response to “Input type="image" value not present, replaced by x,y coordinates”

  1. rb says:

    Good catch, didn't realise this was due to HTML5 - only downside to the above is that IE8 runs into difficulties if you use text-indent to hide the submit value... or for that matter, font-size, padding or many others. It seems to rely on the text to provide the clickable area for the button, so by shoving it to one side you end up with a very visible, but not clickable button. At least, this is what I've found, I may be wrong!

Leave a Reply