HTML & CSS
I was making a form today with a submit input of type="image". But rather than submit the form, the page just kept refreshing in Firefox, though it would submit in Safari and Chrome.
Then I read (here, for example), the FF version 4 and up, as well as Opera and IE, don't submit forms with this any more. Huh? Why?
do not send name/value for input type=”image”; only .x and .y coordinates are sent.
And what are x and y coordinates?
I don't get why they'd drop support for such a straightforward form submit option. Won't that break a lot of forms?
That quote isn't saying that the support is dropped - it is identifying what gets passed to the server when the image is clicked - the x and y coordinates of the spot within the image where the mouse was clicked or 0,0 if the enter key was pressed.
I've never understood that x and y options for image buttons; and if I'm not mistaken firefox 3 (or 4) doesn't send x and y at all (and breaking all sites that relied on it); making the behavior even less predictable.
Since then I always use a submit button instead of an image button
background: url(../img/path/to/my/image.png) no-repeat;
text-transform: capitalize; /* fix text-indent for IE7 */
Something like that. Has the added benefit that there is actual text on the button as well (think screen readers and SEs).
I suspect that the original intended purpose for image buttons whas something that no one actually uses - presumably they are intended for use in situations where it supposedly makes a difference where you click on the image - perhaps they were intended as a replacement for imagemaps.
I had never actually used input type="image" until yesterday, but it seemed to work best for the situation. I was disappointed that it didn't send the form in some browsers. Anyhow, I used a button instead, but it was harder to style.
Yes, <button> has it's own problems ...
Don't forget to set it's type to "submit", otherwise legacy IE won't submit the form when you click it
<button></button> <!-- submits correctly in modern browser, not in legacy IE -->
<button type="submit"><button> <!-- submits correctly in all browsers -->
See button (HTML element)
Yes, thanks, I'm using that. I've used <button> before with no probs, although I had to do a bit more styling to make it work nicely with an image than was needed with input type="image", so I was disappointed to see that type="image" is basically off the shelf (from what I can gather).
They were supposed to send those X, Y coordinates to a server (similar to a server-side image map) but obviously the major problem would be; it relied upon a pointing device, so it goes out of the window, hence why BUTTON should be used. Plus the idiotic fact it [type=image] doesn't have a mandatory ALT attribute!
What coordinates, though, and to what end?
Pixel coordinates obviously, as with an server-side imagemap and it's up to the server-side program to choose the function for those values. "http://www.example.com/cgi-bin/form?10,20" Obviously with a keyboard it's going to be; 0,0 anyway totally defeating the whole object in most cases hence use BUTTON.
This topic is now closed. New replies are no longer allowed.