Tuesday, July 27, 2010

Reset vs Cancel in HTML forms

I’ve been in an interesting discussion today on Twiter on the use of the reset button in forms. The questioner asks if buttons should be [cancel][submit] or [submit][cancel]? My objection is that the cancel button should actually be [reset]. The questioner countered that all OS dialog boxes have a cancel button not a reset, well that be true, but when creating web pages we are not dealing with OS dialog boxes. The difference is simple, with a OS dialog box, you close the box when you hit cancel, when you hit a HTML reset button it clears the form.

Jakob Nielsen has a post dating from 2000 Reset and Cancel Buttons in which he argues that the reset button is bad and shouldn’t be used. His main problem is that most designers put the rest button next to the submit and so can be hit by mistake. He also argues that the reset button isn’t really needed, who needs to clear an entire form and start again? There is also a chance that having the reset button there will slow users down. Reset does seem unneeded for most cases provided the user can return each element of a form to it’s default state.

But what about an explicit Cancel button that closes the form and returns the user to a default page? This would be the equivalent of a OS dialog box so would typically be followed by a “Are you sure yes/no” dialog box which would need to repopulate the form if “no” was selected. In my opinion a cancel button is useful for:

1: Pop out forms , the cancel button just closes the form.
2: Multi form pages with the user filling in a lot of information. A confirm cancellation button is really important here.

So reset buttons should be used sparingly, does a user really need to clear the entire form ? Cancel buttons should be used to make sure the transaction/form is really cancelled and return the user to the default / last none form page.

2 comments:

  1. JBN CREATORS is Ecommerce Website Development company in DELHI. We have more than 5 years of experience serving outsourcing web development services. Provide you service in affordable price at right time. Feel Free contact us 8802969543 , 9650829282 .
    Ecommerce Website Development

    ReplyDelete