How to create reset button in html

HtmlHow-ToBeginner · 3 min read

How to Create a Reset Button in HTML: Simple Guide

To create a reset button in HTML, use the <button> or <input> element with the attribute type="reset". This button will clear all user inputs in the form back to their default values when clicked.

📐

Syntax

The reset button can be created using either the <button> or <input> element with type="reset". This tells the browser that clicking this button should clear the form fields.

<button type="reset">Reset</button> creates a clickable button with text.
<input type="reset" value="Reset"> creates a button with the label from the value attribute.

html

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

Output

Two reset buttons labeled 'Reset' inside a form.

💻

Example

This example shows a simple form with text inputs and a reset button. Clicking the reset button clears all typed text and restores default values.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reset Button Example</title>
</head>
<body>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" value="John Doe"><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" value="john@example.com"><br><br>

    <button type="reset">Clear Form</button>
  </form>
</body>
</html>

Output

A form with two input fields pre-filled with values and a button labeled 'Clear Form'. Clicking the button clears the inputs back to 'John Doe' and 'john@example.com'.

⚠️

Common Pitfalls

Some common mistakes when using reset buttons include:

Placing the reset button outside the <form> element, so it won't affect the form inputs.
Using type="button" instead of type="reset", which does not clear the form.
Expecting the reset button to clear inputs to empty when default values exist; it resets to the original default values, not empty.

html

<form>
  <input type="text" value="Default">
  <!-- Wrong: type="button" does not reset -->
  <button type="button">Reset</button>
  <!-- Correct: type="reset" resets form -->
  <button type="reset">Reset</button>
</form>

Output

A form with one input and two buttons: one labeled 'Reset' that does nothing, and one labeled 'Reset' that clears the input to its default value.

📊

Quick Reference

Attribute	Description	Example
type="reset"	Creates a reset button that clears form inputs
type="reset"	Creates a reset button with label from value attribute
Contains inputs and reset button	Reset button only works inside form	...

✅

Key Takeaways

Use

The reset button clears inputs to their original default values, not necessarily empty.

Ensure the reset button is inside the form element to work correctly.

Avoid using type="button" if you want the button to reset the form.

Reset buttons help users quickly clear form inputs without reloading the page.