A Single Article

Read it, comment, and share it with your friends

Submit buttons should not look like input boxes

Posted March 2 in Design.

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:

input-submit-dow.png

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] and input[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.


Get a Trackback link

1 Trackbacks/Pingbacks

Other blogs referencing this article
  1. Pingback: All in a days work… on March 4, 2007

10 Comments

Responses to my article
  1. Paul Armstrong March 2, 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.

  2. Christian Montoya March 3, 2007

    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.

  3. Andy Pearson March 3, 2007

    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.

  4. Jem March 3, 2007

    I quite like your “Submit Comment” button :)

    (This is probably the most pointless comment I’ve ever left..)

  5. Christian Montoya March 3, 2007

    Jem: Just about.

    But apparently it looks funny in Safari… I think I have some fixin’ to do.

  6. Sebastian Steinmann March 4, 2007

    If my memory serves me rigth there is a reason for not using the button element. Think it has something with IE<7 and submitting all forms on the page. Beside from that the button element is sweet.
    And your submitbutton should have a bit more padding ;)

  7. Christian Montoya March 4, 2007

    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!

  8. Jermayn Parker March 4, 2007

    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.

  9. Jenn March 5, 2007

    It’s just…kind of tall, and feels crowded. But I’m no web designer, so meh!

  10. Christian Montoya March 5, 2007

    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.

Leave a comment

Share your thoughts with the world

You can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Please keep comments respectful and on topic.

This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.





Stay on top of new updates at this site: Subscribe to the Feed!