Friday
Jun172011
Input "Type=Image" Considered Harmful
Friday, June 17, 2011 at 08:04PM
Hi, folks. Kent Brewster here again for Vurve, with a strong recommendation: if you are using
Image submits were never a really great idea; search engines can't read what's written on them, and they tend to look terrible on mobile or small-screen browsers. Recently, however, we've noticed some pretty serious trouble when Firefox 4 encounters image-based form submit tags, especially in combination with many common third-party JavaScript libraries.
This is not, I hasten to add, a problem with Firefox; it's been upgraded to the HTML5 standard, and is doing all the right things. Expect Safari and Chrome to follow soon, followed by Internet Explorer sometime in the year 2025. :)
When the user clicks an image-based input tag, Firefox 4 sends the x and y position of the cursor within the image, and not the name or value attributes of the tag. If you're running JavaScript that depends on the name or value of the submit button or listens for the
Many third-party libraries--including some in common use by many of our store platforms--listen for clicks or submits. If you hear from a customer who says your form doesn't work, he or she might be running Firefox 4 and encountering an image-based input tag.
To style a regular
... to this:
... and add a rule like this--changing the height and width to your image's size of course--to your CSS:
Bonus: you can now do shiny new hover states for your submit buttons! Just create the hovered state as a separate image of the same size, and add this:
Hoping this helps move everybody a little bit closer to the brave new HTML5 universe,
Kent Brewster
Web Guy, Vurve
input type="image" to submit HTML forms, please consider switching to proper input type="submit" buttons.What's the Problem?
Image submits were never a really great idea; search engines can't read what's written on them, and they tend to look terrible on mobile or small-screen browsers. Recently, however, we've noticed some pretty serious trouble when Firefox 4 encounters image-based form submit tags, especially in combination with many common third-party JavaScript libraries.
This is not, I hasten to add, a problem with Firefox; it's been upgraded to the HTML5 standard, and is doing all the right things. Expect Safari and Chrome to follow soon, followed by Internet Explorer sometime in the year 2025. :)
When the user clicks an image-based input tag, Firefox 4 sends the x and y position of the cursor within the image, and not the name or value attributes of the tag. If you're running JavaScript that depends on the name or value of the submit button or listens for the
onsubmit event on the form or the onclick event on the button, unpredictable things--which is code for "very bad things, like your shopping cart page not submitting"--can happen.Many third-party libraries--including some in common use by many of our store platforms--listen for clicks or submits. If you hear from a customer who says your form doesn't work, he or she might be running Firefox 4 and encountering an image-based input tag.
An Easy Fix
To style a regular
input type=submit tag to look just like your old image-based button, change this:<input type="image" src="submitButton.gif" />
... to this:
<input type="submit" class="mySubmit" />
... and add a rule like this--changing the height and width to your image's size of course--to your CSS:
input.mySubmit {
border: none;
cursor: pointer;
display: inline-block;
text-indent: -3000px;
background: url(submitButton.gif) no-repeat 50% 50%;
width: 50px;
height: 20px;
}Bonus: you can now do shiny new hover states for your submit buttons! Just create the hovered state as a separate image of the same size, and add this:
input.mySubmit:hover {
background-image: url(myHoveredImage.gif);
}Hoping this helps move everybody a little bit closer to the brave new HTML5 universe,
Kent Brewster
Web Guy, Vurve
Reader Comments (8)
I'm not sure about using negative text-indent on a submit button, A button, maybe, but a submit button?
I meant on an *input* button, not "submit" button
[...] im vurve-Blog steht, gibt es – durch eine Anpassung in der HTML5-Spezifikation – im aktuellen Firefox 4 ein [...]
Alas, this easy fix will cause accessibility problems to some users. If images aren't displayed but CSS still active, nothing will be displayed on screen.
A W3C/WAI Web Content Accessibility Guidelines 2.0 Technique is related to this problem: http://www.w3.org/TR/WCAG-TECHS/F3.html
High Contrast mode in Windows is one of the case where background images are removed; other cases being crappy, expensive internet access billed according to MB downloaded, error server-side, image not available due to a CDN host not responding (or site not using a CDN and being very slooow), etc
Blind users with screen readers will still hear the text (you didn't use display: none; or visibility: hidden; ) so at least these users are OK with the fix.
Now I've a strange pseudo, after having entered my email address :) and it's really hard to type what I want in the second input. It should read Fellipe, let's try again.
Ignore my posts, I was thinking about something else.
Three posts to say nothing. :-)
No, Thierry, you are right to be suspicious of that. type=image at least gives us "alt".
value="" is required if your background has alpha channels