Ajax Girl

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:

PLAIN TEXT

HTML:

1.  
2. <button type=“submit” name=“delete” value=“1234″><img src=“delete.gif” width=“16″ height=“16″ alt=“Delete” /> Delete message</button>
3.  

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

Source: Ajaxian » Front Page
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/361965881/button-versus-inputtypesubmit-in-ie-and-beyond