HTML Submit and Reset Buttons

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.

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.

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.

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.

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.

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.

<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]

• 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

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

Choose the option that lists all and only the correct statements.

1. <input type="submit" value="Submit Form">

2. <button type="submit">Submit</button>

3. <submit>Go</submit>

4. <input type="button" value="Submit">

Choose the option that lists all and only the correct statements.

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

2. <button type="reset">Start Over</button>

3. <button type="file">Upload</button>

4. <button type="submit" style="background-color: green;">Submit</button>

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.”