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:

  1. <button type="submit" name="delete" value="1234"><img src="delete.gif" width="16" height="16" alt="Delete" /> Delete message</button>

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:

Posted by Dion Almaer at 9:03 am
8 Comments

++---
2.9 rating from 36 votes

8 Comments »

Comments feed TrackBack URI

…so as soon as everyone on IE upgrades to IE 8 we will be fine ;)

So… errrm, that’ll be 2018 then?

Comment by hellweaver666 — August 11, 2008

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.

Comment by Diodeus — August 11, 2008

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.

Comment by Jon Hartmann — August 11, 2008

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

Controls that are disabled cannot be successful.

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

Comment by dhtmlkitchen — August 11, 2008

I don’t what is yourself’s idea!

Comment by jmneter — August 12, 2008

I like cake!

Comment by Jerome — August 12, 2008

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.

Comment by newz2000 — August 13, 2008

@hellweaver666

Amen brotha!

Comment by MattQuinlan — August 14, 2008

Leave a comment

You must be logged in to post a comment.