Monday, August 11th, 2008
button versus input[type="submit"] in IE and beyond
<p>Drew McLellan has written a post on Coping With Internet Explorer's Mishandling of Buttons which delves into browser differences with respect to<button> versus <input type="submit" ...>
First, buttons themselves:
One of the more exasperating quirks of Internet Explorer is the way it mishandles BUTTON elements. If you’re not all that familiar with HTML buttons (and don’t be ashamed, it’s not all that widely used) it’s a very useful element. Unlike regular the INPUT with its type set to submit which displays its value as a textual label on the UI element, a BUTTON can have both a value and contain a mixture of text, images and what have you.
Let’s look at an example:
HTML:When a user activates the button, the form would be submitted containing an item named “delete” with a value of “1234”. On the server side, you can then pick up that a delete button has been activated, and from the value you know which item you should be deleting. All the while, the user interface displays an attractive button with an icon and some call-to-action text.
Drew then goes into the IE issue of posting innerHTML instead of the value of the element. He shows a work around, and then others chip in with other solutions such as:
- Separate forms each time, to prevent IE sending all delete buttons up even if not clicked
- Using the name to share the info (name=delete_10293)
- Using a hidden element for the data, and the button just sends the form
There is good news. IE 8 has fixed it, so as soon as everyone on IE upgrades to IE 8 we will be fine ;)
Related Content:
So… errrm, that’ll be 2018 then?
Or…forget about allowing the form to handle the delete processing completely. Use: type=button onclick=’deleteMe(1122)’ and do it with an Ajax call. After all, this is Ajaxian.
Man, I really hope IE 8 is a issued as a critical update. The web practically NEEDS the button element. Leave it to IE to be years behind everyone in basic HTML compliance.
It is absolutely not fixed in IE8.
-
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/dynamically-updating-button-value.html
-
Nor is disabled .
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/OptionDisabledSupport.html
In IE, an option with disabled attribute is treated as a successful form control. This is a violation of HTML 4.1
http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
-
Blog entries are nice for getting attention (and ad revenue), but are not centralized. The MSIE project serves as a centralized compendium of bugs for MSIE 8. It is a free publicly alternative to the Microsoft “closed by design” Connect site.
-
Clean bug reports are greatly appreciated. Please see the guidelines:
http://code.google.com/p/msie/wiki/Guidelines
I don’t what is yourself’s idea!
I like cake!
The full power of the button tag is out of reach for now, but there is benefit to using them – its easier to style them for one. Plus, you can easily put images on the buttons if you so desire.
@hellweaver666
Amen brotha!