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?