Reset a Form in Just One Step!

How do you clear a form? for years I have been doing it the long way, maybe you have too?

Why?

Let's get the why out of the way, as a user I have been sent back to a form with stale data and I don't want to sit there and delete each field! 😡 every held backspace will make me hate this form and the product more and more.

What is the long way?

Simply put, you query all the elements of the form with which could have a value (even doing this has the potential to balloon in complexity) loop through them and set all Thier values back to blank, but you must consider validation, disabled inputs especially.

Wow that's alot of work!

Yes, and it got me thinking, surely there's a native way?! Yes there are 2!
So let's try the basic HTML only way first:

<form>
    <input type="text" name="description"/>
    <input type="reset"/>
</form>

Here we have a reset type input, have you ever seen such a thing? Let me know down in the comments. It's a button just like a submit and you guessed it, it resets the form.

Now onto JS

HTMLFormInput.reset()

In other words, query a form and call the reset method and hey presto, no more data.

Thanks for reading 😬