Rediscovering the button element

I recently came across an article on about rediscovering the button element. This article takes you through an example of how the button element was used to deliver buttons that look exactly the same across all major browsers, including Safari 2. If you’re still using the input element for buttons then I’d recommend reading this article. To say the least, the button element has better semantics and is just as well, if not better, supported by all major browsers!


  1. The button element is great, it is fantastic with javascript. It doesn't quite work in a form though, because Internet Explorer chooses not to follow specification and send the button's inner HTML instead of it's value… which is a bit annoying.

    My solution to make it work in forms is not to have it send anything, put the information to be sent into hidden input field. That doesn't solve the problem if you wanted conditional submit buttons though. So if you want multiple submit buttons with different values, you'd have to stick with input buttons.

  2. caphun at

    Thanks for the insightful comment. I did not consider backend implications of the <code>button</code> element whilst writing this post.

    I would say however that it's never a good idea to use the value of a <code>button</code> or <code>input</code> element for parsing, so the <code>hidden</code> element solution is equally valid when using an <code>input</code> element as a button.

    As for the IE6 issue with multiple submit buttons I can only say that IE6 is crap and Microsoft know it!

    Love your new site btw. :)