form one liner resets

3 quick ways to reset our HTML form.

<form id="user-form">
    <div>
        <label for="user-name">Name:</label>
        <input type="text" id="user-name" name="user-name">
        <input type="checkbox"> 
        <input type="submit" value="Submit">
    </div>
</form>

Vanilla JavaScript approach

//
document.getElementById('user-form').reset();
//

jQuery approach

//
$('#user-form')[0].reset();
//

HTML approach

Here we just need to add one more input element, with type “reset” to our form and that’s it.

<form id="user-form">
    <div>
        <label for="user-name">Name:</label>
        <input type="text" id="user-name" name="user-name">
        <input type="checkbox"> 
        <input type="reset" value="Reset">
        <input type="submit" value="Submit">
    </div>
</form>

Summary

If you do not need any JavaScript code in your form use built HTML input reset element. It is always less JavaScript code in your project.