HTML Buttons and Submit Buttons in Forms

HTML buttons are the controls users click to submit a form, trigger a reset, or perform an action inside a page. This article explains how <button> and <input type="submit"> behave in forms, how default submission works, and how to avoid the most common mistakes.

Quick answer: Use <button type="submit"> for form submission in most cases. It is flexible, accessible, and can contain text or icons. Use type="button" for non-submitting actions, and always set the type explicitly to avoid accidental form submits.

Difficulty: Beginner

You'll understand this better if you know: basic HTML elements, how forms collect user input, and the difference between attributes and element content.

1. What Are HTML Buttons and Submit Buttons?

In HTML forms, a button is an interactive element that the user can activate. The most common form button is a submit control, which sends the form data to the server or hands it to browser-side form handling. HTML gives you two common ways to create one:

<button> — a flexible button element that can submit, reset, or do a custom action.
<input type="submit"> — a dedicated submit control with simpler content rules.
<input type="button"> — a button that does not submit a form by default.
The type attribute determines what the button does.

In practice, “submit button” usually means any control that submits a form when activated, especially one with type="submit".

2. Why HTML Buttons Matter

Buttons are how users complete a form, confirm an action, or cancel an operation. A well-chosen button improves usability, keyboard access, and clarity.

Buttons matter because they affect:

Form submission behavior when the user clicks or presses Enter.
Accessibility for keyboard and assistive technology users.
Whether a form submits accidentally or only when intended.
The HTML structure available for labels, icons, and rich button content.

Using the right button type also prevents bugs that are hard to spot during testing, such as a button unexpectedly submitting a form.

3. Basic Syntax or Core Idea

The key idea is simple: a button inside a form submits the form when its type is submit. If you leave the type out on a <button>, the default is usually submit.

Minimal submit button

This example shows the smallest useful form with a submit button. Notice the explicit type="submit".

<form action="/signup" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email">
  <button type="submit">Sign up</button>
</form>

This form sends the email field when the user clicks Sign up or presses Enter in a suitable field.

How button types behave

The type attribute changes the meaning of the control:

type="submit" submits the form.
type="reset" restores fields to their initial values.
type="button" does nothing by itself and is used for custom actions.

Choosing the right type is the most important part of using buttons correctly.

4. Step-by-Step Examples

Example 1: Submitting a basic form with <button>

This is the most common setup. The button label is placed between the opening and closing tags, which makes the element flexible and easy to style or expand later.

<form action="/contact" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name">

  <button type="submit">
    Send message
  </button>
</form>

This example submits the form to /contact. The button can hold plain text and can later include icons or other inline content if needed.

Example 2: Using <input type="submit">

The input version is shorter and useful when you only need a text label. It cannot contain nested content, so it is less flexible than <button>.

<form action="/newsletter" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Join newsletter">
</form>

This version is perfectly valid and still common. The label comes from the value attribute instead of element content.

Example 3: Preventing accidental submission with type="button"

Use type="button" when a control should not submit the form. This is especially important for buttons that clear a field, reveal extra options, or open a dialog.

<form action="/profile" method="post">
  <label for="nickname">Nickname</label>
  <input type="text" id="nickname" name="nickname">

  <button type="button">Preview</button>
  <button type="submit">Save profile</button>
</form>

Here, Preview does not submit the form because its type is explicitly set to button.

Example 4: Resetting a form

The reset button restores the form fields to their initial values as they were when the page loaded or the form was reset programmatically.

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

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

This pattern is useful when users need to return a form to its starting state without reloading the page.

5. Practical Use Cases

Buttons and submit controls are used in many everyday form patterns, including:

Login forms with a primary Sign in button.
Search forms where Enter submits the query.
Newsletter signup forms with one clear submit action.
Account settings pages with separate save and cancel controls.
Filters and sorting forms that submit selected options.
Reset buttons for forms with many fields.

As a rule, if a button changes form data and should send it somewhere, it should be a submit button. If it only changes the page state locally, it should usually be a non-submit button.

6. Common Mistakes

Mistake 1: Forgetting to set the button type

Many developers assume a <button> inside a form behaves like a plain action button. In HTML forms, the default type is usually submit, which can cause unexpected form submission.

Problem: This button may submit the form even though the developer only intended it to open a preview or run a local action.

<form>
  <button>Preview</button>
</form>

Fix: Set type="button" for non-submitting actions.

<form>
  <button type="button">Preview</button>
</form>

This works because the browser no longer treats the control as a submit button.

Mistake 2: Using a button where text content is not allowed

The button element can contain text and inline content, but input type="submit" cannot contain inner HTML. New developers often try to place extra markup inside an input control.

Problem: This markup is invalid because input is a void element and cannot have child elements or text nodes.

<input type="submit">Submit now</input>

Fix: Use <button> when you need visible content inside the control.

<button type="submit">Submit now</button>

The corrected version works because button text belongs between the tags.

Mistake 3: Putting multiple submit buttons in a form without clear intent

Forms can contain more than one submit button, but each one should clearly represent a different action. If the labels are vague, users and testers may not know which action will happen.

Problem: Two submit buttons with unclear labels can lead to accidental saves or the wrong action being chosen.

<form action="/post" method="post">
  <textarea name="content"></textarea>
  <button type="submit">Go</button>
  <button type="submit">Do it</button>
</form>

Fix: Give each submit button a clear, specific label so the action is obvious.

<form action="/post" method="post">
  <textarea name="content"></textarea>
  <button type="submit">Publish post</button>
  <button type="submit">Save draft</button>
</form>

The corrected version works because each button communicates a distinct action to the user.

7. Best Practices

Use explicit type values on every button

Do not rely on the default behavior of <button>. Setting the type makes your intent clear and prevents accidental submits when the markup changes later.

<button type="submit">Save</button>
<button type="button">Cancel</button>

This approach is safer than leaving the type implicit.

Use descriptive button labels

Button text should tell the user exactly what will happen. Generic labels like OK, Go, or Submit can be less helpful than action-specific labels.

<button type="submit">Create account</button>

A clear label improves accessibility and reduces form mistakes.

Keep one primary submit action when possible

Most forms are easier to understand when they have one obvious main action. If you need multiple actions, make their purpose distinct and avoid putting secondary actions next to the submit button unless the layout makes the difference clear.

<form>
  <button type="button">Cancel</button>
  <button type="submit">Save changes</button>
</form>

This layout helps users spot the primary action quickly.

8. Limitations and Edge Cases

<input type="submit"> cannot contain nested HTML, so it is not suitable for icons plus text layouts.
A button inside a form may submit the nearest associated form, which can be surprising in nested or complex layouts.
The Enter key usually submits a form from a text field, but the exact behavior can vary depending on the fields present and browser rules.
Disabled buttons cannot be activated by users, so they should not be used to communicate important form instructions.
Buttons do not replace labels. A visible button label is not the same as a field label.
A reset button restores initial values, not necessarily the values the user expects after dynamic changes.

When a form has multiple submit buttons, the browser may send the clicked button’s name and value with the submission, which can be useful for distinguishing actions like Save draft versus Publish.

9. Practical Mini Project

Here is a small complete form that combines a submit button, a secondary action, and a reset control. It demonstrates a clean structure you can reuse for many forms.

<form action="/account" method="post">
  <fieldset>
    <legend>Account settings</legend>

    <label for="display-name">Display name</label>
    <input type="text" id="display-name" name="displayName" value="Alex">

    <label for="timezone">Time zone</label>
    <select id="timezone" name="timezone">
      <option>UTC</option>
      <option>Europe/Lisbon</option>
      <option>America/New_York</option>
    </select>

    <div>
      <button type="button">Cancel</button>
      <button type="reset">Reset</button>
      <button type="submit">Save changes</button>
    </div>
  </fieldset>
</form>

This example shows the main pattern: one primary submit action, one reset action, and one non-submit button for a secondary task. The structure is semantic, accessible, and easy to extend.

10. Key Points

<button type="submit"> is the most flexible and common form submit control.
<input type="submit"> is valid, but it is less flexible because it cannot contain inner content.
Always set the button type explicitly to avoid accidental form submissions.
Use type="button" for actions that should not submit the form.
Use clear labels so users understand what the button will do.
Reset buttons restore initial form values and should be used carefully.

11. Practice Exercise

Create a simple form for a password change page with these requirements:

One password field and one confirm password field.
One primary submit button labeled Change password.
One secondary button labeled Cancel that does not submit the form.
One reset button labeled Clear.

Expected output: A valid HTML form where only the primary button submits the form.

Hint: Use type="submit" for the main action, type="button" for Cancel, and type="reset" for Clear.

Solution:

<form action="/password" method="post">
  <label for="password">New password</label>
  <input type="password" id="password" name="password">

  <label for="confirm-password">Confirm password</label>
  <input type="password" id="confirm-password" name="confirmPassword">

  <button type="button">Cancel</button>
  <button type="reset">Clear</button>
  <button type="submit">Change password</button>
</form>

This solution keeps the actions separate and predictable, which is exactly what users need in a form with more than one control.

12. Final Summary

HTML buttons are a core part of form interaction. The most important decision is whether a control should submit the form, reset it, or act as a non-submitting button. In most modern forms, <button type="submit"> is the best default choice because it is flexible, accessible, and easy to read.

Remember to set button types explicitly, write clear labels, and reserve reset buttons for cases where users truly need them. If you understand the difference between submit, button, and reset, you can build forms that behave consistently across browsers and are easier for users to complete.

Next, learn how form attributes like name, value, and method work together with submit buttons to send the right data.