Kay lives here

working with the web

126172-simple-black-square-icon-alphanumeric-bracket-curley210px-W3C_Icon.svg

Forget input type=submit — use a button!

1022774_60336373

A ques­tion about using hover states on an input type=image ele­ment came up on the Web Stan­dards Group mail­ing list today…

… and it reminded me that a lot of peo­ple don’t know about the fan­tas­tic input type=button that works so much bet­ter than input type=submit or input type=image.

Devel­op­ers — includ­ing 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 sup­ported by Netscape 4. Now that most devel­op­ers don’t have to bother with that old browser any­more, we can be free to use the but­ton ele­ment to make our lives easier.

I was intro­duced to the but­ton ele­ment by Nick Cowie, who pre­sented on the topic to the Perth Web Stan­dards Group in March of 2005 — check out the audio record­ing, tran­scrip­tion and pre­sen­ta­tion slides.

In a nut­shell, the but­ton ele­ment is cool because but­ton type=submit works exactly like input type=submit, except that it has an open and close tag and you can put any inline ele­ment inside it. So you can put an image, or some text, or even a Flash movie were you so inclined, and style it how­ever you like with­out all the odd behav­iour that you get with input type=submit or input type=image.

Another cou­ple of links about styling but­tons were also posted on the WSG list:

Styling form but­tons — Tyssen Design
Push my but­ton — Dig­i­tal Web Mag­a­zine

So, next time you build a form, try throw­ing in a but­ton instead of an input type=submit. But be a lit­tle care­ful, because they are not com­pletely with­out idio­syn­cra­cies. Nick recently reported that IE gets things a lit­tle back­wards some­times (typical!).

Comments are closed.