Christian Montoya

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:

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.

Thank you for reading • Published on March 2nd, 2007 • Please take a moment to share this with your friends