HTML Submit Button

HTML submit buttons allow users to send form data for processing. They are commonly used on login pages, registration forms, contact forms, checkout pages, and search forms. HTML provides the <input type="submit"> element and the <button type="submit"> element to create submit buttons.

What Is an HTML Submit Button?

An HTML submit button is a form control that submits the form when the user clicks it or activates it using the keyboard. The browser first performs applicable built-in form validation before submitting the form.

For example, a registration form may contain fields for a user’s name, email address, and password, followed by a submit button.

To understand how forms work, explore HTML Forms and HTML Form Structure.

HTML Submit Button Example

The following example demonstrates how to create a simple submit button.

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

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

  <button type="submit">Register</button>
</form>

In this example:

• <form> defines the form.
• action="/register" specifies the example endpoint that receives the form submission.
• method="post" sends the form data using an HTTP POST request.
• required makes each field mandatory.
• <button type="submit"> submits the form.

The /register endpoint must be implemented by the website. HTML alone does not create a registration system or store user information.

Using the Input Submit Element

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

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

  <input type="submit" value="Submit Form">
</form>

The value attribute defines the text displayed on the input submit button.

Both approaches can submit a form, but the <button> element offers more flexibility because its content can include text and other permitted HTML elements.

Learn more about HTML Input Types and HTML Form Elements.

Important Submit Button Attributes

Several attributes help control submit button behavior.

• type="submit" specifies that the button submits the form.
• value sets the displayed text for an input submit button.
• disabled prevents the button from being activated.
• name and value can identify which submit button was used when multiple named buttons are present.
• formaction overrides the form’s action for that submission.
• formmethod overrides the form’s submission method.

For example:

<form action="/save" method="post">
  <input type="text" name="title" placeholder="Enter a title">

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

  <button
    type="submit"
    formaction="/publish"
    formmethod="post"
  >
    Publish
  </button>
</form>

The Save button submits to /save, while the Publish button submits to /publish. Both endpoints must exist and handle the submitted data.

Styling HTML Submit Buttons with CSS

CSS can improve the appearance of submit buttons.

<style>
  button[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }

  button[type="submit"]:hover {
    background-color: #0056b3;
  }
</style>

The button uses a blue background, white text, and rounded corners. The :hover selector changes its background when a user points to it.

Submit Button vs Regular Button

A submit button submits its associated form by default. A regular button created with <button type="button"> does not submit the form automatically and is often used with JavaScript.

Always specify the button’s type when its behavior matters. A <button> inside a form defaults to submit behavior if its type is omitted.

Frequently Asked Questions

Does a submit button validate form fields?

The browser performs built-in validation before a normal form submission when validation is enabled. Server-side validation is still necessary.

Can a form have multiple submit buttons?

Yes. Each button can submit the same form, and attributes such as formaction can give different buttons different destinations.

What is the difference between <button type="submit"> and <input type="submit">?

Both can submit a form. The <button> element allows more flexible content, while the input element uses its value attribute for its label.

Can I disable a submit button?

Yes. Add the disabled attribute to prevent users from activating the button.