Multiple submit buttons in an HTML form

html

responsive-design

best-practices

form-design

byNikita Barsukov·Mar 1, 2025

Assign distinct name and value for each button to differentiate the submit buttons at server-side.

<form method="post">
    <input type="submit" name="submitAction" value="Save">
    <input type="submit" name="submitAction" value="Delete">
</form>

Server-side (e.g., PHP):

switch ($_POST['submitAction']) {
    case 'Save': 
        // Save logic - treasure or database, you choose ☠️💰
        break;
    case 'Delete':
        // Delete logic - oblivion is calling 🗑️
        break;
}

This approach simplifies server-side handling and clearly differentiates the submit buttons.

Prioritize the submission order

Visually, the "Next" button in a wizard interface might be floating right, but in HTML, arrange it first. This makes it the prime candidate when pressing the Enter key:

<form method="post">
    <!-- Spot on Next button -->
    <input type="submit" class="float-right" name="navigate" value="Next">
    <!-- Good ol' Previous button -->
    <input type="submit" name="navigate" value="Previous">
</form>

Leverage CSS to nail the "Next" button to the right without the aid of JavaScript:

.float-right {
    float: right; /* Swimming to the right 🏊‍♀️ */
}

.clear-buttons::after {
    content: "";
    display: table;
    clear: both; /* Both lanes cleared for takeoff 🚀 */
}

A hidden gem for consistent 'Enter' key behavior

When styling imposes severe restrictions, the hidden input comes to the rescue:

<form method="post">
    <div style="display:none;">
        <input type="submit" name="defaultAction" value="Default"> <!-- The secret tunnel🤫 -->
    </div>
    <!-- Other buttons on parade -->
</form>

The Enter key submits the form using the covert "Default" input, assuring consistent behavior across all browsers.

Call the shots with 'default' button attribute

To explicitly set the primary action, HTML5 introduces the formaction attribute which can overwrite the form’s action attribute:

<form method="post" action="/DefaultAction">
    <input type="submit" name="submitAction" value="Save">
    <input type="submit" formaction="/SpecialAction" name="submitAction" value="Special"> <!-- Look ma, I am special! 🌟 -->
</form>

This fosters flexibility in form design and explicit designation of primary actions.

Server-side distinguishing of actions

Don't forget to validate the value of the submit button on the server side. It controls both form navigation and action handling:

if (isset($_POST['submitAction'])) {
    $action = $_POST['submitAction']; /* Woah! I got the power 💪 */
    // Proceed based on the value of action
}

This strategic decision influences the form workflow thus aligning with user preferences and application needs.

When non-submit buttons are on board

For non-submission buttons that execute client-side scripts, use <input type="button">:

<form method="post">
    <input type="submit" name="submitAction" value="Submit">
    <input type="button" onclick="someFunction();" value="Do Not Submit"> <!-- Whoa! I don't follow orders 🏴‍☠️ -->
</form>

This lets the button run the JavaScript code without submitting the form.

Handy tips and potential pitfalls

Use type="submit" for buttons that need to submit the form.
Rely on the server-side to distinguish between actions; always validate user input.
Floats are useful tools in controlling visual designs sans JavaScript; ensure they're cleared adequately.
Maintain browser consistency for the default submit action if CSS is used for visually reordering buttons.
For accessibility: Favor ordering elements correctly in HTML over excessive use of tabindex to ease keyboard traversal.