HTML Reset Button: Restore Form Fields to Their Initial Values

An HTML reset button restores the controls in its form to their initial values. It does not submit the form and it does not necessarily make every field empty.

<form>
  <label for="city">City:</label>
  <input type="text" id="city" name="city" value="Hyderabad">
  <button type="reset">Reset</button>
</form>

If the user changes the city and then activates Reset, the field returns to Hyderabad because that is its initial value.

Reset Button Syntax Top ↑

You can create a reset control with either <button type="reset"> or <input type="reset">.

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

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

The value attribute on <input type="reset"> controls the text displayed on the button. A name attribute is normally unnecessary because clicking a reset control does not submit form data.

What Gets Restored Top ↑

Resetting restores form controls to the state defined when the form was initialized, not simply to blank values.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" value="Alex">

  <label><input type="checkbox" name="updates" checked> Receive updates</label>

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

After reset, the text field returns to Alex and the checkbox returns to its initially checked state.

Button vs Input Syntax Top ↑

Both forms are valid. The <button> form is usually more flexible because it can contain richer HTML content, while <input type="reset"> uses its value as the label.

<!-- Flexible button content -->
<button type="reset">Reset form</button>

<!-- Input-style reset control -->
<input type="reset" value="Reset form">

If you use a normal <button> inside a form, explicitly set its type. Otherwise its default behavior may be submission rather than reset.

Reset a Form with JavaScript Top ↑

JavaScript can reset a form with its reset() method. This is useful when resetting is part of an application workflow rather than something the user triggers with a native reset control.

<form id="profile-form">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</form>

<script>
document.getElementById('profile-form').reset();
</script>

The Reset Event Top ↑

A form fires a reset event when it is being reset. JavaScript can listen for that event when an interface needs additional behavior.

<script>
const form = document.getElementById('profile-form');

form.addEventListener('reset', (event) => {
  console.log('The form is being reset.');
});
</script>

Do not add JavaScript merely to duplicate the browser's native reset behavior. Use it only when your interface has additional state that genuinely needs to stay synchronized.

UX and Accessibility Top ↑

• Use a clear label such as Reset form or Clear filters when that describes the action more precisely.
• Avoid placing Reset immediately beside Submit when the two controls could easily be confused.
• Be cautious on long forms because reset can destroy significant user-entered work.
• If only a few fields commonly need clearing, letting users edit those fields directly may be safer than resetting everything.
• Do not rely on color alone to distinguish Reset from Submit.

Common Reset Button Mistakes Top ↑

Assuming reset always clears every field Top ↑

Reset restores initial values. A field that started with a value returns to that value.

Using reset on every form Top ↑

Many forms do not need a reset control. Add one only when users have a real reason to restore the whole form.

Giving a control the name reset Top ↑

This can interfere with JavaScript access to the form's native reset() method.

Expecting a reset button to submit data Top ↑

A reset control resets fields; it does not send the form to the server.

Related Tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: