Browsers dropping support for input type="image"?

HTML & CSS
1

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?

2

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.

3

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


input[type="submit"] { 
  border: 0;
  background: url(../img/path/to/my/image.png) no-repeat;
  height: 20px;
  width: 100px;
  text-indent: -999em;
  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).

4

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.

5

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.

6

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)

7

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).

8

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!

9

What coordinates, though, and to what end?

10

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. “[FONT=Courier New]http://www.example.com/cgi-bin/form?10,20[/FONT]” Obviously with a keyboard it’s going to be; 0,0 anyway totally defeating the whole object in most cases hence use BUTTON.