How to reset forms elements (input,select,textarea,etc.) on events using jQuery

This is already built in if you wrap those form elements in an actual form:

<form id="myform">  
    <input type="button" value="Input Button">
    <input type="checkbox">
    <input type="file">
    <input type="hidden">
    <input type="image">
    <input type="password">
    <input type="radio">
    <input type="submit">
    <input type="text">
    <select>
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
    </select>
 
    <textarea></textarea>
    <button type="button">Button</button> 

    <button type="reset">Reset</button>
</form>

FIDDLE

If you just have to use jQuery:

$('span').click(function() {
    $('#myform').get(0).reset();
});

FIDDLE

A late comment about resetting textareas.

Using Chrome version Version 54.0.2840.99 m on a PC running Windows 10 Home version, I found that the native/built-in reset function that is called by a regular/unmodified reset button or the form.reset() statement does restore the initial field value of a textarea, but only if the textarea was not previously programmatically cleared, say with a custom clear button that empties the textarea's innerHTML.

This isn't observable when the textarea is first loaded without a default value, but if the textarea is coded to show data from a previous posting of the form, then the textarea may not be empty, and resetting the textarea should set the field to the value that it had when the form was loaded.

What I found was that the textarea's defaultValue attribute that the native reset uses is incorrectly cleared when the textarea's innerHTML was emptied and then subsequent resets just clears the textarea rather than resetting textarea as expected. I consider this a bug because compared to clearing and resetting other text input fields, the textarea works differently.

This 'odd-man-out' behavior can be worked-around by adding a custom initialValue attribute to a textarea and assigning the innerHTML value to the it. Since the native reset and custom clear function don't affect the custom attribute, the value is preserved, and can be used to restore the textarea's value by overriding a reset button to call a function that sets the textarea's innerHTML to the initialValue attribute's value and then calls the form.reset() function to handle the other input fields. Note that calling the form.reset() function causes the custom reset function called by the modified reset button to not execute any code after the form.reset().