In defense of the Reset button...

This post is more than 2 years old.

Earlier this morning, in a fit of intense silliness - I tweeted an observation about reset buttons and forms:

Now, to be clear, I can't remember the last time I accidentally cleared a form, but it still surprises me when I see the element on a page. I honestly cannot remember ever wanting to reset my form and it just feels like a bit of wasted space.

But of course - as soon as I tweeted this I got some pretty interesting responses that made me re-examine my thoughts on the feature in general. Here they are in no particular order.

Ok, so that's an interesting demo there. To be honest, whenever I see CSS doing weird stuff with forms, I get a bit concerned. It seems cool to "twist" stuff that way but something about it just seems wrong to me. That being said, I can't CSS my way out of a paper bag so what do I know? In the end though, his demo/usage doesn't really match my initial statement about the "typical" use of the reset button.

I replied back to Dan to clarify that he was talking about a form using Ajax and in that respect - I think it makes sense. As long as you change the value of the reset button to something like "Clear Search" and as long as you clear the results too, then I think this is actually a pretty darn valid use of the reset button.

And yes - you can listen for a reset event. I never knew it existed but it makes sense that it does. Here it is in jQuery:

$("form").on("reset", function(e) {
    console.log("reset event");
    console.dir(e);
});

And yes - if you return false from this event you can block a reset event. Why in the world would you do that? I have no idea. But you can.

As an aside - if you listen to the change event on a form field, even though reset technically changes the value (or may change the value), you will not get an event fired. I guess this makes sense, but if you are listening for change events and have a reset button, you'll want to listen for the reset event as well.

This examples makes sense too - and you would need to listen to the reset event to handle it. But as with my issue with the fancy CSS drop down menu thing, this feels like a small violation of the purpose of the button. Not that the W3C Police will come after you, but it seems wrong.

Don't forget that modern browsers support the formaction attribute. You could literally do this something like this:


<input type="submit" value="Cancel" formaction="index.html">

This only works on submit buttons though. Support is actually pretty good, and an article over on Wufoo documents this: The formaction attribute.

So my take away from this is that Sarah's customers are asking for this on secured pages. I can't see why a customer would ask for this - but at the same time - I've got intimate knowledge of browsers that a casual user would not have. Seeing a way to remove form data with a single click could be reassuring. And in fact, a bit later Ben S said the same thing:

I guess I can see this helping users feel safe. As a reminder though, don't forget that the reset button doesn't "clear" forms, it literally resets it. So if your form is using hard coded values, perhaps on a "Edit Profile" page, the reset button isn't going to clear anything off screen. Rather it will just return the form back to its original values.

Any comments on this?

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Alex posted on 11/11/2015 at 8:56 PM

I've hit so many reset buttons by accident when they are in the location of where you would expect the primary action button. I wouldn't be so angry if there was just an 'undo' reset that appears after hitting reset.

Comment 2 by Joe Shelby posted on 11/11/2015 at 10:04 PM

Why a reset function that you can use to cancel by returning 'false'?

Remember that window.confirm is a modal, synchronous, blocking dialog. You can use it to prompt the user if they made significant changes on whether or not they really want to reset them.

Granted, nobody uses the built-in window.confirm (or window.alert) anymore since they can't be styled, but remember this was state-of-the-art 1995-1997. HTML and javascript-DOM have a lot of cruft that nobody would ever recommend using, but as it was in the 1.0's of those days, they can't get rid of them...much as they should.

Comment 3 (In reply to #2) by Joe Shelby posted on 11/11/2015 at 10:06 PM

The other things to remember:

1) this was 1995, not 2015, and MOST people had never been on the web or entered web form information back then;

2) forms were used for editing existing, not just entering new, so a reset would keep you from damaging existing data. that was actually the more common use-case for it than a reset on a "new" object where the form was entirely empty. Again, a support for #1 - this was all VERY new to a lot of people.

Comment 4 (In reply to #2) by Joe Shelby posted on 11/11/2015 at 10:10 PM

in no way am i suggesting actually using reset anymore (there are better interaction mechanisms, though they require more code), just that the reasons for it existing at all made sense in that context.

Comment 5 (In reply to #3) by Raymond Camden posted on 11/11/2015 at 11:18 PM

Joe - thanks for sharing this. I've been building for the web since 1995 but it didn't occur to me to think in that context. Thanks!

Comment 6 (In reply to #1) by Doug posted on 11/1/2016 at 1:37 AM

Of course, there's always the tabbing. When the focus is on a reset button because a person - unfamiliar with how the Internet Webpages and their forms actually work - sometimes will remember the days of their typing class, back in high school, and hit the Enter key...reverting lots of time they have invested in making changes to their data online (in this form), will be quite upset. My wife was doing our taxes online, (fortunately, the IRS forms have only one textbox or dropdown per page) and she kept that right hand pinky finger on the "Carriage return" because of her typing classes. Decades ago, "Enter" on the keyboard meant a new line on the sheet of paper in the typewriter. I finally had to finish the tax forms last year. I tried telling her that you need to hit the tab key, honey...not the Enter key.