Using an HTML ‘Reset’ button is an easy way to reset all form fields to their default values. For instance, the code snippet below shows an <input> field of type “reset”, which on being clicked resets all the form fields: <input type="reset" value="Reset Form"> In fact, we could also use the form's reset() method to achieve the same effect, using a simple button element: <input type="button" value="Reset Form" onClick="this.form.reset()" /> These methods are very convenient to use, but they do not provide the functionality of clearing all the fields, including their default values.
There are many ways of accessing form elements, of which the easiest is by using the cross-browser W3C DOM document.getElementById() method. Before we learn more about this method, it would be useful to know something about the Document Object Model (DOM), the concept of HTML nodes or elements, and the concept of containers. Each time you load an HTML page, the web browser generates an internal representation of the page in the form of an inverted tree structure.