button vs input type="submit" vs a onclick="document.formname.submit()"

Question

Hi guys,

Just trying to implement these buttons at the moment: http://particletree.com/features/rediscovering-the-button-element/

Can't decide which to go for, since here we mostly use IE6. As far as I can tell...

button:

• Lets you submit the form as usual (ie hitting enter on the form), lets you disable it, standards compliant, doesn't rely on javascript
• No :hover in IE6 without using Suckerfish, but you can't then style it accordingly and are limited to just one background color & has a horrible black border in IE6

input type="submit":

• Also let's you submit the form as usual
• Can't include images so you'll have a silly amount of class files for what I need, and again no :hover in IE6 without Suckerfish

a onclick="document.formname.submit()"

• Easy to style in IE6 without any hacks
• Not so easy to work with, without hacks! ie you can't submit the button with the enter key

... so I'm just wondering, of the three, which one is generally preferred? Ideally I guess I want function over style, but it is a requirement to have Javascript enabled here (it's only for an intranet page) and I guess generally people don't mind too much what's going on in the background? Hmm.

Answer 1

Go for onclick="document.formname.submit()" route for style and add hidden button for functionality.

Answer 2

I recommend the submit button, simply because that's exactly what it's there for. If you have any disabled users, the submit button will be the most meaningful button to them.

If you really don't like the border around the buttons in IE6, than you can always hide the submit button with JavaScript and then create your own button with the styles you want, whenever your home made button is clicked, then you call the submit button's onclick event handler (which will submit the form). This still allows the user to hit the enter key to submit data, and keeps the submit key in there for people who have disabled JavaScript.

Answer 3

If you use <a> with onclick, don't forget to set role="button" and wairole="button" and also set the onkeypress handler to make the "button" accessible!