Web Forms

Buttons on Web Forms

Buttons are a key component of your Web site, here are some common practises:

First, make the label clear and concise. Always label buttons with the name of the action that the user is performing. And always make it a verb. A common mistake is to label buttons "Go" for various actions such as searching, sending email and saving. Labels should also be short and to the point; no need to clutter the user interface.

Include all button states (default, hover, active) to provide clear visual cues to the user as to what is happening. Button outlines should remain in the active state only.

Clearly distinguish between primary and secondary actions. The most important action should be the most prominent. This is usually done by giving primary and secondary actions different colors.

Pay close attention to consistency. Buttons should be consistent throughout a Web application, both visually and behavior-wise. Use CSS sliding doors for reused buttons or CSS 3 rounded corners to maintain consistency.

The entire button area should be clickable.


Source: http://www.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/
However, because they play a critical role in website usability, the buttons should meet some key principles:

  1. First consider the labeling. Always label buttons with the name of the action that the user is performing. And always make it a verb. A common mistake is to label buttons “Go” for various actions such as searching, sending email and saving. Labels should also be short and to the point; no need to clutter the user interface.
  2. As mentioned, include all button states (default, hover, active) to provide clear visual cues to the user as to what is happening. Button outlines should remain in the active state only.
  3. Clearly distinguish between primary and secondary actions. The most important action should be the most prominent. This is usually done by giving primary and secondary actions different colors.
  4. Pay close attention to consistency. Buttons should be consistent throughout a Web application, both visually and behavior-wise. Use CSS sliding doors for reused buttons or CSS 3 rounded corners to maintain consistency.
  5. Though obvious, we should note that the entire button area should be clickable.

Optional Design Ideas
iPhone Like Buttons
Css Sprite Generator
Simple Button Sprite
Scalable Buttons

Web Form Standards

After several years of trial and error, here are my standards for creating forms.

Separate the content of the form from the code that takes place when the form is submitted. It is WAY easier to maintain the design, allows for the possibility of different file formats, and easier to setup for testing.

Follow the process through from start to finish until there are no errors; but create a test routine in the form to allow full access for debugging the code.

1. Variable names should be logical and explanatory.

2. Set the maxlength attribute to match the MySQL field length.

3. Validate the content input into the form. Always.