Ways to reset an HTML form

#1 - after submission

This can be useful for forms that are intended to be submitted multiple times. After submitting one instance of the form, all fields are reset to their default values, allowing the user to fill out and submit another instance of the form.

It's tempting to think the 205 Reset Content status code would do this. But it doesn't. This was discussed on the Mozilla Firefox bugtracker 19 years ago. Conclusion: There's no easy way to implement it, and no desire for a complex implementation. After 11 years of dormancy, the bug was closed with the comment:

205 is not a defacto thing

Instead of 205, you can return a response with a 200 status code, and the original form in the body of the response. This will result in a reset form being shown to the user.

Here's a demonstration:

#2 - with a reset button

Reset buttons are built in to HTML:

<input type="reset" value="Reset form">

MDN warns to be cautious with this:

Note: You should usually avoid including reset buttons in your forms. They're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button).

If you do need a reset button, it might be a good idea to place it far away from the submit button (perhaps in the upper right corner).

Here's a demonstration:

#3 - with JavaScript

Maybe you want to add a keyboard shortcut to reset the form. Maybe you prefer to reset the form at random to annoy your users. JavaScript gives you flexibility. Call the reset() method an a form element:

document.getElementById('my-form').reset();

In this demonstration, the form is reset when you resize your browser window or rotate your screen: