HTML Submit and Reset Buttons - Input and Button Tags

Submit and Reset Buttons in HTML Forms

Every form needs a way to say “I’m done” — that’s the submit button. Sometimes users need a clean slate — enter the reset button. These two controls give users confidence and control over form interaction.

Submit Button: Sending the Form

The <input type="submit"> sends form data to the location defined in the <form action>.

<form action="/submit" method="post">
  <input type="text" name="fruit" placeholder="Apple"><br><br>
  <input type="submit" value="Send">
</form>

[ Apple           ]
[Send]

When clicked, this button sends the form to /submit using the POST method.

Reset Button: Clearing the Form

The <input type="reset"> clears all fields in the form, reverting them to their initial states.

<form>
  <input type="text" name="fruit" placeholder="Banana"><br><br>
  <input type="reset" value="Clear">
</form>

[ Banana           ]
[Clear]

This is especially useful in long forms where users may want to start over.

Using <button> Instead of <input>

You can also create buttons using the <button> element, which allows for more content inside (like icons or HTML).

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

[Submit Form] [Reset Form]

This is useful when you want styled or labeled buttons that do more than just display text.

Customizing Button Labels

The value attribute lets you change the label of an <input> button.

<input type="submit" value="Send Feedback">

[Send Feedback]

Be clear and action-oriented in your button labels to guide users effectively.

Basic Button Styling with Inline CSS

While CSS deserves a full lesson, here’s a quick peek at customizing button styles inline:

<input type="submit" value="Submit" style="background-color: green; color: white; padding: 8px 16px;">

[Submit]  (green background with white text)

For consistent design, it’s better to move styling to an external stylesheet — but this gives you immediate control.

Full Example: Form with Submit and Reset

<form action="/process" method="post">
  <label for="fruit">Favorite Fruit:</label><br>
  <input type="text" id="fruit" name="fruit" placeholder="Cherry"><br><br>

  <label for="feedback">Your Feedback:</label><br>
  <textarea id="feedback" name="feedback" rows="4" cols="40"></textarea><br><br>

  <input type="submit" value="Send">
  <input type="reset" value="Clear">
</form>

Favorite Fruit:
[ Cherry           ]

Your Feedback:
[                                      ]
[                                      ]
[                                      ]
[                                      ]

[Send] [Clear]

Best Practices

• Use a reset button only if needed — accidental resets can frustrate users
• Label submit buttons clearly — “Submit” is okay, “Send Feedback” is better
• Use the <button> tag when you want flexibility in design or structure

Summary

Submit and reset buttons complete the form experience — empowering users to act, confirm, or rethink. You now know how to:

• Create submit buttons to trigger form submission
• Use reset buttons to clear forms
• Style buttons and label them effectively

What’s Next?

With form elements in place, the next step is essential: Validating Form Inputs. Learn how to ensure users fill out the right data before they click “Submit.”