Time again for another user experience rule, and this time I couldn't stop at just one. I've got four rules for you about forms; one of the most daunting aspects of UX design. You can save yourself some trouble with the following rules:
Rule 2: Ditch the Reset button.
Rule 3: Make your Cancel button look like a link, or make it visually washed out compared to your Submit button.
Rule 4: Make sure that there is at least a 2em distance between your Submit and your Cancel buttons.
Rule 5: Submit on the left, Cancel on the right.
Read more to see my reasonings and an example.
When was the last time you intentionally reset a form? If you've made a mistake, which is faster: to click the form and make the change, or to click "Reset" and then go back in and fill in whatever information you lost, and then finally correct the problem? In todays word clearing out the whole form is probably the last thing that anyone wants to do.
If you have a form that is so complex that a user might need to start completely over, you need to know somethings wrong with the rest of your interface design. Even if the use does want to start over, why can't they Cancel and then click back to the form? Its the same number of button clicks (one to reset, one to reach the top of the form).
Having a reset button is more likely to be hit on accident then intentionally, and its going to frustrate your users every time.
No matter what a form is designed to do, the last action that you probably ever one your user to cancel out of the form. They came to your form for a reason, so should only cancel if your form scared them off or if they changed their minds. In either case, you should make sure that users don't hit Cancel unless they really do want to cancel. Its just as a dangerous as a Reset, but unlike a Reset, your users actually do need a way out of your form (not providing a way back is probably worse then them hitting the button accidentally).
So, you need Cancel, but you want your users to click it only if they really need to cancel. The answer is to make it visually less impacting than the Submit button. This keeps users from even "seeing" the button unless they look for it.
Spacing and Positioning
Put your Submit button on the left, since users look for it in-line with the for values. Your cancel should be to the right so it stays out of the direct line users follow down a form. This decreases the likelihood that a user will just run down the list and hit button that looks most appropriate.
Make sure that your Cancel button is outside of the threat range of sloppy clickers. You know who I'm talking about: your dad who clicks anywhere and everywhere around a button until he happens to hit it. A space of at least 2em gives you enough of a buffer that even your dad should hit be able to avoid hitting Cancel on accident.
As I said in my last post, these rules aren't set in stone. A good example of when you need to flex these rules is when dealing with paginated, or "wizard" forms.