4

I was wondering when a "Clear" / "Reset" action in a form is needed.

Example at the bottom right.

Reset Form

  • What would be a common scenario for needing a "Clear" / "Reset" action?
  • When would a "Clear" /"Reset" action in a form not be needed?
  • Does there exist any user research data on the topic of usage of a "Clear" / "Reset" button or similar in e.g. a form?
  • 2
    it's a bit dated, but i think it makes some good points nngroup.com/articles/reset-and-cancel-buttons – FabioG Apr 29 '14 at 12:05
  • Fantastic, feel free to add this as an answer. :) – Andreas Johansson Apr 29 '14 at 13:40
  • passing it as just a reference that makes some good points in the subject: Reset and Cancel Buttons Also something you should take into consideration is that if clicked by mistake, secondary actions (such as Reset and Clear) typically have undesired consequences, so you should use only primary actions (submit) where possible. If you must include secondary actions, give them less visual weight than primary actions. – FabioG Apr 29 '14 at 14:02
  • I agree with the NNGroup article, the only scenario in which I can see a reset button being handy is if you wanted to wipe autofill data for whatever reason. Often I find that my browser autofills with the wrong form data and I have to manually go back and clear the fields. – Anindya Basu Apr 30 '14 at 15:49
  • 1
    Anindya: That would be an implementation problem. When creating your forms, you can opt not to have the forms be prefilled by setting autofill to false. – Francis Pelland May 1 '14 at 4:07
4

The Nielson Norman Group article linked by FabioG in the comments covers the standard usability view: don't use reset buttons! There's nothing more annoying that filling out a form and then resetting it by mistake.

However, there is one case where a reset button is useful: if the form starts out with filled-in content, and the user changes it but then wants to go back. I'm talking about content from the webserver, e.g., common defaults or based on the user's history with the site, not browser auto-fill content. Another example is when you're editing a persistent form, such as user profile settings. The default "reset" behaviour in this case is not to delete the content, but to revert to the default or original value.

(This also covers Anindya Basu's suggestion in the comments of reset being useful to cancel out browser autocomplete, but there are other ways to handle that.)

Example form:
Image of sample form from the link above, created by the following code

<form>
    <label> User id:
        <input value="Your hard-to-remember id number"/>
    </label>
    <label> Address:
        <textArea rows="5">
Your long mailing address
That goes on for multiple lines
Maybe with a post code you'll need to look up...
        </textArea>
    </label>
    <label> Email: 
        <input autocomplete="on"/>
    </label>
    <button class="main" type="submit">Submit</button>
    <button class="minor cancel" type="button">Cancel</button>
    <button class="minor" type="reset">Reset</button>
</form>

As the NNGroup page argues, you should always make form actions undo-able, but there are multiple ways to do so. If the form doesn't have default values, it is just as easy to erase entries by deleting the text or cancelling the entire page action, so a reset button doesn't add any value. Resetting a form to default/original values, however, is a distinct added functionality.

As I mention on the fiddle page, you can definitely finesse the interaction to provide more focused user control with Javascript, allowing them to reset individual fields. However, as a baseline for users who don't have Javascript enabled, you could start with mark-up like the above, and then remove the reset button with the script that adds field-by-field reset options.

Finally, of course you should follow all other usability guidelines / standard layout to make the main action the obvious one and reduce the likelihood of resetting the form by mistake. In my sample form the main button is larger, coloured, and flush right while the other two buttons are small and flush left.

  • Thanks a lot, the link alone to the nielsen norman group is awesome. :) If you are interested in optimal placement of primary/secondary action buttons in forms, I recommend the following source (based on user studies) by Luke Wroblewski: static.lukew.com/webforms_lukew.pdf – Andreas Johansson Jun 11 '14 at 7:11
  • Interesting. I'm sure the talk it goes with would have been even better -- you can really only get a vague gist from looking at someone's slides without the notes. – AmeliaBR Jun 11 '14 at 20:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.