HTML Reset Button

HTML reset buttons allow users to restore form fields to their original default values. They are useful in search forms, registration forms, surveys, and other forms where users may want to clear their changes and start again. HTML provides the <input type="reset"> element and the <button type="reset"> element to create reset buttons.

What Is an HTML Reset Button?

An HTML reset button restores the form controls associated with a form to their initial values. These are the values the controls had when the page loaded, or the values specified by their HTML attributes.

For example, if a form contains a name field, an email field, and a checkbox, clicking the reset button restores those controls to their initial states.

To understand form basics, explore HTML Forms and HTML Form Structure.

HTML Reset Button Example

The following example demonstrates how to create a form with a reset button.

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

  <br><br>

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

  <br><br>

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

In this example:

• <form> contains the form controls.
• <input type="text"> accepts a name.
• <input type="email"> accepts an email address.
• <button type="submit"> submits the form.
• <button type="reset"> restores the controls to their initial values.

If users enter information and then click Reset, the fields return to their original states.

Using the Input Reset Element

You can also create a reset button using <input type="reset">.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">

  <br><br>

  <input type="reset" value="Clear Form">
</form>

The value attribute defines the text displayed on the reset button.

Both <button type="reset"> and <input type="reset"> provide reset functionality. The button element allows more flexibility when customizing its content.

Learn more about HTML Input Types and HTML Form Elements.

Resetting Fields to Their Default Values

A reset button does not necessarily make every field empty. It restores each control to its initial value.

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

  <br><br>

  <label for="newsletter">Subscribe to newsletter:</label>
  <input type="checkbox" id="newsletter" name="newsletter" checked>

  <br><br>

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

When the page loads, the city field contains Hyderabad and the checkbox is selected. Clicking Reset restores these original values.

Styling HTML Reset Buttons with CSS

CSS can help distinguish reset buttons from submit buttons.

<style>
  button[type="reset"] {
    background-color: #6c757d;
    color: white;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }

  button[type="reset"]:hover {
    background-color: #495057;
  }
</style>

The reset button uses a gray background and rounded corners. The hover effect changes its color when the user points to it.

HTML Reset Button vs Submit Button

A reset button restores form controls to their initial values, while a submit button sends form data for processing.

For example, Reset can undo changes made in a form, whereas Submit sends the entered information to the specified destination.

Be careful when adding reset buttons to long forms. Users may accidentally lose their entries, so consider whether the reset option is necessary for your application.

Frequently Asked Questions

Does an HTML reset button clear every field?

No. It restores form controls to their initial values, which may include predefined text, selected options, or checked checkboxes.

Does a reset button submit the form?

No. A reset button restores the form controls without submitting the form.

Can I change the reset button text?

Yes. For <button type="reset">, change the text between the opening and closing tags. For <input type="reset">, change its value attribute.

Can I use JavaScript with a reset button?

Yes. JavaScript can listen for the form’s reset event to perform additional actions. However, the default reset behavior should be preserved unless there is a clear reason to change it.