13

Just trying to implement these buttons at the moment: http://web.archive.org/web/20110721191046/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.

Improve this question
5
  • Probably the worst solution ever, but if using document.formname.submit() that I could also include a hidden submit button, so that the user can still hit enter to submit the form as usual? Hmm. Commented Nov 25, 2009 at 9:39
  • 3
    Actually "input type=submit" is the one that doesn't need javascript to submit. For "type=button" and "button", Firefox and perhaps some other browsers might submit the form, but not IE. You also missed out "input type=image" which is the image replacement for "type=submit". Commented Nov 25, 2009 at 9:43
  • Thanks okw - input type="image" sounds good but I'd like some text also. For example, if the user enters information correctly I want a little tick icon and some text to appear, otherwise for it to be greyed out and disabled. Commented Nov 25, 2009 at 9:47
  • The more I think about it... should I go with input type="submit" and just have loads of classes for different states? Commented Nov 25, 2009 at 10:01
  • @Nick hi, would you mind to share how to write a hidden submit button? Commented May 15, 2013 at 12:38

3 Answers 3

Reset to default
11

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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Thanks - I may go for this, I know it's really not ideal from a coding point of view, but maybe for the users it'll work out best.
Oh okay, one issue with this - I'm using <a href="#" onclick="document.formname.submit()"> which is okay, but throws you to the top of the page when you click it. Is there anyway to make it so that it won't jump to the top of the page? return false doesn't work cos it just stops it submitting!
try onclick="document.formname.submit();return false;" to prevent dafault onclick handler.
Nice idea thanks, unfortunately I'm running a function when you submit the form - all a bit of a nightmare! ^_^ Going to just use input type="submit" and stick with the black border in IE6 unfortunately I think
Sorry... whats wrong with "running a function when you submit the form"? I misunderstand this... You will have your submit() running but no default onClick action on <a/> will fire (thus no scroll to top i hope ;)
|
5

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.

Improve this answer

Comments

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!

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.