HTML Submit Button

A submit button sends the form's successful controls to the URL defined by the form's action, using the form's method.

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

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

Using input type=submit Top ↑

The classic submit control uses an <input> element:

<input type="submit" name="submitbtn" value="Submit">

The value attribute supplies the text shown on this type of submit button.

Using button type=submit Top ↑

The <button> element is often more convenient because its visible label is placed between the opening and closing tags:

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

Be explicit about the type when a button is inside a form:

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

Submit Button Attributes Top ↑

name and value Top ↑

A submit button can contribute its own name/value pair when it is the button used to submit the form.

<button type="submit" name="action" value="save">Save</button>

If that button submits the form, the request includes a value equivalent to:

action=save

This is useful when one form has several submit actions.

Multiple Submit Buttons Top ↑

Two submit buttons can share the same name but use different values:

<form action="article.php" method="post">
  <button type="submit" name="action" value="save">Save Draft</button>
  <button type="submit" name="action" value="publish">Publish</button>
</form>

The server can distinguish which submit button was used from the submitted action value.

Using two submit buttons in one form →

Override Form Action with formaction Top ↑

The formaction attribute lets a submit button send the same form to a different URL than the form's normal action.

<form action="save.php" method="post">
  <button type="submit">Save</button>
  <button type="submit" formaction="preview.php">Preview</button>
</form>

This provides a modern HTML solution for several workflows that older tutorials handled entirely with scripting.

Override Method with formmethod Top ↑

A submit button can also override the form method:

<form action="search.php" method="get">
  <button type="submit">Search</button>
  <button type="submit" formaction="save-search.php" formmethod="post">Save Search</button>
</form>

Use GET for retrievable requests such as searches and POST for requests that create or change server-side state.

Open Submission in Another Target Top ↑

formtarget overrides the form's target for one submit button:

<button
  type="submit"
  formaction="preview.php"
  formtarget="_blank"
>Preview in New Tab</button>

See submitting a form to a new window or tab.

formnovalidate Top ↑

If a form contains browser validation constraints, one submit button can bypass them with formnovalidate:

<button type="submit">Submit</button>
<button type="submit" name="action" value="draft" formnovalidate>Save Draft</button>

Disabled Submit Button Top ↑

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

A disabled submit button cannot normally be activated and does not contribute its name/value pair to form submission.

JavaScript Validation and Submission Top ↑

JavaScript can validate or enhance a form before submission, but important validation must also run on the server.

JavaScript form validation →

Common Submit Button Mistakes Top ↑

Using a button without type inside a form Top ↑

A plain <button> inside a form defaults to submit behavior. Use type="button" for buttons that should not submit.

Confusing the visible text with the submitted value Top ↑

For input type="submit", the value is both the displayed label and the submitted value. For button type="submit", the visible label is its content and the submitted value comes from its value attribute when provided.

Assuming every submit includes every button Top ↑

Only the submitter button normally contributes its own name/value pair. This is useful for identifying which of several actions the user chose.

Using JavaScript when HTML submitter attributes are enough Top ↑

For different actions, methods or targets, consider formaction, formmethod and formtarget before adding script.

Relying only on browser validation Top ↑

HTML and JavaScript validation improve usability but do not replace server-side validation.

Using a disabled button as a security control Top ↑

Users can construct requests independently of the interface. Authorization belongs on the server.

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: