Form button for two forms

How to Align Buttons for Two Different Forms in HTML

When designing a web interface, you often run into a layout challenge where two buttons need to sit side-by-side for visual consistency, but they actually need to trigger two completely different actions or forms. A common example is having a "Save" button for a data entry form and a "Back" or "Cancel" button that redirects the user elsewhere.

Recently, I needed to line up two form submit buttons for two different forms. To find the most efficient modern solution, I consulted several AI tools, including Copilot, Gemini, and Perplexity. Interestingly, the results were a bit of a mixed bag, proving that even advanced AI can struggle with specific UI layout requirements.

The AI Recommendations

Copilot's suggestion involved using the formaction attribute. While formaction is a valid HTML5 attribute that allows a button to override the initial form's action URL, it keeps both buttons tied to the same form data. If you need two entirely separate form structures, this isn't the ideal path.

Gemini's suggestion was more traditional: creating two separate forms. However, the problem with this approach is the visual layout. By default, HTML <form> elements are block-level elements. If you put one button in Form A and another in Form B, they will stack on top of each other unless you apply significant CSS styling to make the forms inline or flexbox-compatible.

Perplexity provided a similar result to Copilot, focusing on one form with multiple buttons, which didn't quite capture the need for two independent forms.

The Problem: Why Simple Forms Fail the Layout Test

The struggle here is the "Parent-Child" relationship in HTML. Usually, a button must be a child of a <form> to submit it. If you want two buttons next to each other, they usually need to be in the same container. But if they belong to different forms, they are usually forced into different containers, breaking your CSS alignment.

My Solution: Using the HTML5 "form" Attribute

After some trial and error, I found the most elegant solution. It uses a powerful but often overlooked feature of HTML5: the form attribute.

The form attribute allows you to associate a <button> (or <input>) with any form on the page, regardless of where that button is physically located in the HTML code. This means you can physically place a button inside "Form A" but technically link it to "Form B" using its ID.Recently need line up two form submit buttons for two different forms. So I asked Copilot and Gemini. also the perplexity.

Here are the results:

Copilot:

<form>
    <!-- Form 1 content -->
    <button type="submit" formaction="/action_one">Submit Form 1</button>
    <!-- Form 2 content -->
    <button type="submit" formaction="/action_two">Submit Form 2</button>
</form>

Gemini:

<form action="form1_action.php" method="post">
  <input type="submit" value="Submit Form 1">
</form>

<form action="form2_action.php" method="post">
  <input type="submit" value="Submit Form 2">
</form>

Perplexity: - no two forms
<form action="/DEFAULT_URL" method="post">
  <!-- Input fields here -->
  <button type="submit">BUTTON 1</button>
  <button type="submit" formaction="/URL2">BUTTON 2</button>
</form>
So looks not what I want, or I did not prompt properly? Any way, what I want is:
<form ...>
    ...
    ...
    <button ...>Save</button>
    <button form="back-form"...>Back</button>
</form>
<form id="back-form" ...></form>
sighing...