Usability Tip:
RESET Button and Forms

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

No online form would be complete without a SUBMIT button. But what about that other button: the CLEAR or RESET button that erases the user's input? Is it really needed? More important – does it help the user in any way?

Generally, the answer is no. Often a RESET button does more harm than good.

Basic Form Design

In it's most basic design, a form doesn't even require a SUBMIT button. Forms that consist of a single text box will generally process using just the ENTER key. We don't recommend that though, because it will confuse some visitors.

Here's the code for a very basic form. Note that the ACTION attribute is required for form processing. But the action you want depends on the nature and purpose of the form. It's not important here, so we left it blank for clarity's sake. You can still press SUBMIT, but the form doesn't process.

For more information about form processing, refer to our previous Webmaster Tip: Form Processing Basics.

Here's the code for the sample form we'll use for this article:

Here's how it looks on the page. Note, we added some CSS attributes to make the example stand out from the surrounding text.

This example form has both a SUBMIT and a RESET button. Because the form lacks an ACTION attribute, the form data doesn't submit when you click or press the SUBMIT button. The form inputs disappear when you press SUBMIT, but no form processing actually takes place.

Now you see it, now you don't!

The Difference Between Clear and RESET

From the above example, you may assume that the RESET button just cleared all the form field data you just entered. But that's not the case. You actually reset the form to its original state – one that contained only blank fields.

Here's another example that has content already entered in the text boxes. Change it and then press the RESET button. Note, the fields don't "clear" (meaning all the information disappears entirely) but reset to how they were originally.

Usability Concerns With RESET

In our example forms, it's no big deal if a user accidentally resets the form before submitting it. We're only talking about three fields!

But what if this were a long, involved form that took considerable time to enter and contained important information? Something like the billing and shipping information form in an online shopping cart. Online shoppers are already averse to filling out long forms and tend to abandon shopping carts when the transaction takes too long to complete.

Imagine the frustration of someone who gets to the very last field and then accidentally deletes all his information.

That's one reason noted Web usabilty expert Jakob Neilsen notes in one of his online columns:

"The Web would be a happier place if virtually all RESET buttons were removed. This button almost never helps users, but often hurts them."

Neilsen discusses three problems with form RESET buttons:

1. When users click the button by mistake, they lose all their data.
2. Two buttons clutter the interface and slow down visitors who have to look at both to determine the next step.
3. The extra choice requires extra thinking time and slows down the user unnecessarily.

Warn Visitors About The RESET Button

If you decide to use a RESET button, consider styling it differently than the SUBMIT button. Either make it a different size, color, font – actually, with CSS, your options are almost limitless! The important thing is to visually separate the two buttons.

Kind of like this:

In this case, we styled the RESET button in red, as a visual warning. Depending on your site's color scheme, you may choose other options.

Using CLEAR/RESET Effectively

So now we've made the RESET button sound almost completely useless. But you know that in Web design, there's at least one exception to every rule. There are times when a RESET button actually improves the user's experience and feelings of security.

Some of your visitors may not have Internet access at home and so access the Web from a public library, school, or other public location. In many cases, these users are just beginning to use the Internet and concerned about security and sharing personal information.

Of course, you can direct users to your site's privacy policy to assure them you won't be selling their personal data, but that doesn't address the concern of using a public terminal to send it. If your form is collecting valuable personal information like credit card numbers or similar information, consider including a reassuring statement note with the form: "Selecting the CLEAR FORM (or RESET) button will permanently erase all the information you entered in this form."

That's obvious to developers, but average users may enjoy the extra feeling of security. Isn't one extra line in the form worth making your customers feel comfortable?

Keep Visitors At Your Site

Unfortunately, many sites have great forms, beautiful layouts, and fantastic customer service – but still not make any sales.

Why? Often because the site is just too slow to load or the forms process so slowly that visitors give up and jump to the competition. Use NetMechanic's ServerCheck Pro tool to monitor server response time and server uptime. ServerCheck Pro monitors your server for uptime and alerts you to downtime issues. It also calculates server response time and delivers regular statistical reports on your server's performance.