A question about using hover states on an input type=image element came up on the Web Standards Group mailing list today…

… and it reminded me that a lot of people don’t know about the fantastic input type=button that works so much better than input type=submit or input type=image.

Developers – including me, until quite recently – don’t know about it and don’t use it because although part of the HTML 4 spec, it was never supported by Netscape 4. Now that most developers don’t have to bother with that old browser anymore, we can be free to use the button element to make our lives easier.

I was introduced to the button element by Nick Cowie, who presented on the topic to the Perth Web Standards Group in March of 2005 – check out the audio recording, transcription and presentation slides.

In a nutshell, the button element is cool because button type=submit works exactly like input type=submit, except that it has an open and close tag and you can put any inline element inside it. So you can put an image, or some text, or even a Flash movie were you so inclined, and style it however you like without all the odd behaviour that you get with input type=submit or input type=image.

Another couple of links about styling buttons were also posted on the WSG list:

Styling form buttons – Tyssen Design
Push my button – Digital Web Magazine


So, next time you build a form, try throwing in a button instead of an input type=submit. But be a little careful, because they are not completely without idiosyncracies. Nick recently reported that IE gets things a little backwards sometimes (typical!).