Reset HTML Forms Programmatically with JavaScript

HTML provides native form reset functionality through <input type="reset"> buttons. However, modern web applications often need programmatic control — clearing forms after successful submissions, implementing custom UX patterns, or integrating with JavaScript frameworks.

[!TIP] Real-World Scenario: Your user completes a multi-step registration form. After clicking “Create Account”, you want to clear all fields and show a success message — without reloading the page. JavaScript’s reset() method handles this cleanly while preserving your SPA’s state.

How do I reset a form using JavaScript?

The HTMLFormElement.reset() method restores a form’s elements to their initial values — as specified in the HTML, not blank states.

Basic form reset

<form id="contactForm">
  <input type="text" name="name" value="Default Name">
  <input type="email" name="email" value="user@example.com">
  <button type="button" onclick="resetForm()">Clear Form</button>
</form>

function resetForm() {
  const form = document.getElementById('contactForm');
  form.reset();
}

After reset:

• name field returns to “Default Name”
• email field returns to “user@example.com”

[!IMPORTANT] reset() restores initial HTML values, not empty strings. If you want to clear to blank, use input.value = '' on each field instead.

How do I handle reset events and custom logic?

The reset event fires before the form actually resets, allowing you to intercept or augment the behavior:

const form = document.getElementById('contactForm');

// Listen for reset event
form.addEventListener('reset', function(event) {
  // Confirm with user
  if (!confirm('Clear all entered data?')) {
    event.preventDefault(); // Cancel the reset
    return;
  }
  
  // Custom cleanup (runs before reset completes)
  console.log('Form is being reset...');
  clearCustomValidationMessages();
});

Reset with custom default values

function resetToCustomDefaults() {
  const form = document.getElementById('contactForm');
  const inputs = form.querySelectorAll('input, select, textarea');
  
  inputs.forEach(input => {
    // Check for data-default attribute first
    if (input.dataset.default) {
      input.value = input.dataset.default;
    } else {
      input.value = input.defaultValue; // HTML default
    }
  });
}

<input type="text" name="country" value="USA" data-default="United States">
<!-- resetToCustomDefaults() sets "United States" instead of "USA" -->

How do I reset forms in modern JavaScript frameworks?

React

function ContactForm() {
  const formRef = useRef(null);
  
  const handleSubmit = (e) => {
    e.preventDefault();
    // Submit logic...
    formRef.current.reset(); // Clear after successful submit
  };
  
  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <input name="email" type="email" />
      <button type="submit">Send</button>
    </form>
  );
}

Vue 3

<template>
  <form @submit.prevent="handleSubmit" ref="formRef">
    <input v-model="form.name" name="name" />
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const formRef = ref(null);
const form = ref({ name: '' });

const handleSubmit = () => {
  // Submit logic...
  formRef.value.reset();
  form.value = { name: '' }; // Also clear reactive state
};
</script>

How do I selectively reset form sections?

Reset only specific fieldsets or groups:

function resetSection(fieldsetId) {
  const fieldset = document.getElementById(fieldsetId);
  const inputs = fieldset.querySelectorAll('input, select, textarea');
  
  inputs.forEach(input => {
    if (input.type === 'checkbox' || input.type === 'radio') {
      input.checked = input.defaultChecked;
    } else if (input.tagName === 'SELECT') {
      input.selectedIndex = 0; // Reset to first option
    } else {
      input.value = input.defaultValue;
    }
  });
}

Summary

• reset() restores to initial HTML values, not blanks
• Use event.preventDefault() in reset listener to cancel
• Combine with validation library reset for complete cleanup
• Framework forms may need both DOM reset and state reset

FAQ

Does reset() clear validation error messages? No. Native reset() only affects form control values. Validation messages from libraries (like Yup, Joi) or custom displays must be cleared separately in the reset event handler.

Can I reset a form that isn’t in the DOM? Forms must be attached to the DOM to use reset(). For detached forms, manually iterate fields and restore defaultValue properties.

Why does my select element reset to the wrong option? reset() restores the option with selected attribute in HTML. If no option has selected, it resets to the first option. Ensure your HTML specifies the intended default.

<!-- This resets to "usa" -->
<select name="country">
  <option value="canada">Canada</option>
  <option value="usa" selected>United States</option>
  <option value="mexico">Mexico</option>
</select>

How do I reset file inputs? File inputs are special — reset() clears them to empty (no file selected), which is usually the desired behavior. You cannot programmatically set a file input’s value due to security restrictions.

Does reset() trigger change events? No. The reset event fires, but individual change events do not. If your app relies on change listeners, manually trigger them or update dependent state in the reset handler.

What to Read Next

• Find IP Address of Any Website Using Linux Commands — debug form submission issues with network tools
• Install GitHub Desktop on Ubuntu 26.04 — version control your JavaScript projects
• The Art of Beautiful Git Commits — commit your form handling improvements with clear messages

Related Articles

Deepen your understanding with these curated continuations.

View All Articles

JavaScript 5 min read

Export HTML Canvas to Image Using Native JavaScript

Learn how to convert an HTML Canvas directly into PNG, JPEG, or WEBP images using native JavaScript. Save screenshots without using heavy third-party libraries.

Darsh Jariwala May 11, 2020

JavaScript 5 min read

Common Ways to Create Objects in JavaScript

Discover effective ways to create objects in JavaScript, including constructors, ES6 classes, and singletons. Master object creation with this detailed guide.

Vishnu Nov 02, 2024

Tutorial 5 min read

Convert array to an object in JavaScript

This article explains simplest and quickest way to convert array to an object in JavaScript. Using widely accepted spread operator `...` makes easy to do it.

Vishnu Jan 21, 2021