Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

In Defense of the Reset Button…

DZone's Guide to

In Defense of the Reset Button…

Think you don't need that reset button? Well, there are several instances, like drop down menus, where it might be useful. Check out why.

· Mobile Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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

Speaking of forms, why are we still adding Reset buttons? When was the last time you *intentionally* reset a form?

— Raymond Camden (@raymondcamden) November 3, 2015

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.

@raymondcamden@zeldman for CSS-only drop-down nav controlled by radio inputs, where a reset closes the active menu https://t.co/qAtmqPDazl

— Radoslav Sharapanov (@radogado) November 3, 2015

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.

@raymondcamden Only on a form used to filter search results (to reset it back to the default filter criteria).

— Dan Skaggs (@dskaggs) November 3, 2015

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.

@raymondcamden I see them more used (and labelled) as "Cancel" which typically takes you back a page vs just clearing.

— Jordan Kasper (@jakerella) November 3, 2015

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.

@raymondcamden Password-protected pages. Happens during testing and in daily use cases for our clients (work at a web dev. company)

— Sarah Jedrey (@sejedrey) November 3, 2015

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:

@raymondcamden@zeldman Funnily enough we just added them. Our users felt safer (in testing) knowing they could revert & restart their work.

— Ben S (@beseku) November 3, 2015

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?

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:
css ,javascript ,form ,ux ,ui

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}