About Submit & Reset Buttons

We should never, ever, use a Reset button; it’s far too easy for a visitor to hit it accidentally, thereby clearing several minutes of data entry. And just how often does a visitor deliberately want to clear an entire form, anyway? Rarely, it would seem. Most of the time, the visitor wants to retype a field or two but almost never needs to retype an entire form. Besides, hitting the browser’s “refresh” button would serve the same function as a Reset button.

If you do feel the need to include a Reset button, use it with caution, and at least be sure to use JavaScript to capture the reset event in order to ask, “Are you sure…?”, thus double-checking the visitor’s intention before he or she does something irreversible.

Submit and Reset buttons should be easy to see, and should be close to their related form controls. In any circumstance where the user has to choose between two or more action buttons, like Submit and Reset, be sure to position the safer or more positive action on the left, and the riskier or more negative action on the right. Also make sure default focus lands on the safer of the two actions, in case the visitor hits Enter without paying attention to the offered choices.

Any time there could be irreversible consequences for a visitor’s action, be sure to confirm that the action is what was actually intended. For example, never delete an account, submit an order, or change critical data in the database without first asking, “Are you sure you want to …” (fill in the blank, of course, with a description of the critical action).

After a form has been submitted to the server, visitors are reassured if the server sends back a response page that re-displays the entered information. That way, they can double-check that the information they intended to provide was not only entered properly but also received correctly by the web site.

There have been no comments | Subscribe to Comments | Jump to Form »

Post Comment on This Article

Your e-mail address won't be published. If you simply add some value to the original post and stay on the topic, your comment will be approved.

You can use Textile parameters on your comments. For example: _italic_ *bold* bq. quated text "link text":URL — Get your own picture next to your comment with a Gravatar account.