Kill the reset button in HTML forms

In this age of user-centric design, the HTML reset button is past its useful lifespan.

I reached this important and passionate conclusion only after getting bitten in the ass by a reset button today. That’s the offending form, above, and there is that unnecessary Reset button that I clicked.

The reset button serves one function, and one function only: it clears all data from the form. Under what circumstances does the user need that fuction?

First scenario: fill & submit
In the first use-case, someone fills out a form and submits it. The reset button is not needed.

Second scenario: fill, error, submit
Or, someone could fill out a form, realize that they’ve made an error, and need to go back and correct it. The likelihood that every field is incorrect is extremely low … so again, the reset button is interface cruft.

Third scenario: fill, change mind
Finally, someone could fill out a form online, then decide that they don’t want to submit it after all. Well, all they need to do is leave the page. Click through to somewhere else, or close the browser. Once again, the reset button is unneeded.

Unneeded, but dangerous too
Not only is the reset button not needed, it’s dangerous.

Like me not paying proper attention today, some users will fill out forms, attempt to submit them, and accidently hit the wrong button. The consequences of this user action are instant, severe, and irrevocable.

All the data you entered (2-5 minutes of work, depending on the number of form items) is gone instantly, without a did-you-really-mean-to-press-that-button. And there’s no undo command that will recover the data. So the only recourse is to re-type the data. (Or give up and just leave.)

Why? Why? Why?
One good way of improving any process is asking why again and again – even about mundane elements that everyone just takes for granted.

If the above is true – and I’m not overlooking some important purpose – the Reset button on web forms is not only largely useless, it’s potentially dangerous both to the user and to the website proprietor who wants to hear from visitors/clients.

So why is it still there? Why do so many web forms – probably the vast majority of them – still have a Reset button?

For geeks only
Could it be that the Reset button’s major purpose in life is developer debugging during the web development process?

While building a site or a form functionality on a site, a developer will submit data to a form multiple times to ensure that all fields are working as they ought, all data is being saved correctly to the database, and an appropriate thank you page follows successful submission of the form. (Not to mention security testing, buffer overflow testing, etc. etc.)

During this process, it’s very helpful to have a reset button to change the data, wipe out data that is auto-completing because your browser is set up to auto-fill certain fields, and so on. So it makes sense to include a Reset button.

And that’s the only purpose I can think of for the Reset button. Which means it’s time to get rid of it.

That will simply your interface while reducing the possibility of user error … all while not taking an iota of functionality away from your visitors.

Slam dunk!

[tags] html web webdesign websites forms reset buttons [/tags]
         

7 CommentsLeave a comment

  • Hi John, I actually had a two paragraph long comment, but then I accidentally clicked on the “Reset Comments” button under this form.

    I think the original purpose of “reset button” was to roll-back the form to the original state with initial values, but I agree in general “reset” buttons should be thrown out of the window, or perhaps be renamed “The Easy Button” just for laugh!

  • Historically a reset button really does have a purpose. It is so if you select a radio button from a set, but then want to not select any of the radio buttons you have to have a reset button to clear it as otherwise all you can do is select an alternate radio button from the set but not unselect it altogether.

    Why a reset button would be used on any other form is plain silly ;>

  • Ahhh … good call. I missed that use case.

    As a user, it’d still be pretty painful to lose all your entered elements to clear one, though – assuming there’s 5-6 elements.

    Also, I’m wondering if in the scenario you’re talking about you’d need to clear that radio button selection entirely. After all, if you’re going to submit the form, presumably you need *some response* for each question … and if you’re not going to submit the form, you don’t really care if you’ve started to answer a few questions.

  • I never even thought about it before, but you’re right. Why the hell have a reset button, I will now boycott it from now on.

  • Lovely article! I couldn’t agree more.
    One more thing that get’s on my nerves, is when you fill out a form, you make a mistake, and when you are returned to the form page, all data is gone.
    I am coding a page now, and it happens to my form… Do you know how to stop this from happening??

    Thanks,
    Oresztesz

  • Here’s what I would like to happen, and I’ve seen it on a couple of site, but can never remember when I think of adding it to my site.

    My students can access their grades but filling out a very short form (UserID, password, course). After they review their grades, I would like the action of going “back” (hitting the back bottom) to reset the form, so that that student’s UserID is not longer there (the password does reset, but nothing else).

    Any suggestions? I’m thinking some Javascript might do this.