Submit buttons should not look like input boxes
I see this mistake all the time on various websites, especially with simple templates. A site may have a form with a few text boxes and a submit button, and sometimes the submit buttons will be styled the same as the input boxes. This is an easy mistake to make if you are designing your pages on a Mac and you don't test with a browser that doesn't force the OSX-native buttons on forms. Here's an example:
Now I'm taking this from a friend as an example, but I don't mean to call her out on this; it's a common mistake.
The reason why it is important to create a visual distinction between input boxes and submit buttons is that the two have very different functions. It should be obvious to the user where the text inputs end and the submit button begins, which requires using very different styles for the two. For example, if your text inputs are set into the page, the buttons should probably bulge out of the page. If you text inputs use one set of colors, it might be best to invert those colors for the submit buttons.
The problem, however, is that <input type="text"> and <input type="submit"> both use the same tag, which is why when designers style input boxes, they end up modifying their submit buttons too. There are a few ways around this though:
- Use classes on your form inputs and style the classes instead, so you can differentiate between "text" and "submit."
- Use
<button>for your submit buttons, which can actually be styled in Mac browsers like Safari, Camino, & Opera for Mac. - Forget about IE 6 support and use
input[type=text]andinput[type=submit]to differentiate the two in your CSS.
Each option has its pros and cons, which I won't get into here, but any way you do it, it's important to avoid making text inputs and submit buttons the same.
1 Trackbacks/Pingbacks
- Pingback: All in a days work… on March 4, 2007
I usually put id="submit" on input submit buttons since I never have more than one on a page (and if I do, I'll differentiate them) and just style input#submit. I've never liked the button element for some unknown reason.
The nice thing about the button element is that you can style it and even Safari/Camino/Opera-Mac will respect your styling. Then again, if you like to use <input type="image"> then that's a different story altogether.
I went through a phase of styling the hell out of input elements but now feel it's important to keep them looking as the browser intended.
Inputs are one of the only elements that remain consistent across websites and I think it is good idea to keep them this way, it means that when the user sees an input like that, they will know exactly what to do with it.
So now I just tweak the internal padding a little and leave the input's to look how they like.
I quite like your "Submit Comment" button
(This is probably the most pointless comment I've ever left..)
Jem: Just about.
But apparently it looks funny in Safari… I think I have some fixin' to do.
If my memory serves me rigth there is a reason for not using the
buttonelement. Think it has something with IE<7 and submitting all forms on the page. Beside from that thebuttonelement is sweet.And your submitbutton should have a bit more padding
Sebastian: I know about that problem and if I'm not mistaken, as long as you are just checking for the inputs in those forms it's not a big problem if all of the are submitted at the same time.
As for padding on my button, I have a feeling it looks different for you than it does for me… in FF-Vista it looks padded enough!
I agree with Andy Pearson and that you should stick with the original default button that the browser displays. This way you will not confuse anyone.
It's just…kind of tall, and feels crowded. But I'm no web designer, so meh!
Jenn: I wasn't talking about what you are seeing in Safari. That's totally unintentional. I'm going to try something soon to see if I can fix that.
k, so if Im styling all my inputs globally, how would I "un-style" my submit buttons?
I just want a normal browser default submit button.
any thoughts?
Once you've broken your submit buttons, you can't fix them. The browser will not re-apply its default styling. You either have to come up with something custom (like the fancy buttons I have here), or you have to avoid breaking them to begin with. In my latest interface designs, I have been applying classes to all my inputs, so I can style them based on those classes and leave my submit buttons unaffected. You do, however, have a few other options:
<button>instead of<input type="submit">. Almost all the browsers treat them the same way, and it eliminates conflicts.input[type]method that CSS offers… but with this route, you won't have IE 6 support.nice