Is it valid to have an HTML form inside another HTML form?

html

responsive-design

best-practices

accessibility

byAlex Kataev·Feb 25, 2025

Nesting a <form> within another <form> is invalid according to HTML standards and can lead to unstable behavior and data misfires.

Individual forms ensure consistent data transmission.

<form action="/action1" method="post">
  <input type="text" name="field1">
  <input type="submit" value="Send">
</form>

<form action="/action2" method="post">
  <input type="text" name="field2">
  <input type="submit" value="Send">
</form>

Keep It Simple, Coder! (KISC)

A form within a form? Tempting, especially for complex interfaces. However, HTML opts for cleanliness over chaos. So the conventional 'nested forms' behavior is a no-go. But wait, there're workarounds!

Use those 'flows & working areas'

Group your related inputs with <fieldset>:

<form action="/action" method="post">
  <fieldset>
    <legend>Who are you?</legend>
    <!-- Sherlock, is that you? -->
  </fieldset>

  <fieldset>
    <legend>Take my money</legend>
    <!-- The credit card company thanks you -->
  </fieldset>

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

JavaScript: Knighting the events

Second option is JavaScript's event delegation. Time to outsource the heavy lifting!

document.addEventListener('submit', function(event) {
  if (event.target.matches('.inner-action')) {
    // Entry-level task for an ambitious intern called 'event'
    event.preventDefault();
    // Teamwork makes the dream work!
  }
});

JavaScript & Form integrity: The dynamic duo

JavaScript lets you steer the wheel and control the data submission. You can also program nested-leaning behaviors without the HTML nesting:

AJAX for the asynchronous fix

AJAX: Your handy alternative for shuffling parts of a form without nesting:

$('#part1').submit(function(event) {
  event.preventDefault();
  $.ajax({
    url: '/part1-action',
    method: 'post',
    data: $(this).serialize(),
    success: function(response) {
      // Translate to: "The force is with us"
    }
  });
});

HTML5 'form' attribute: Sniping inputs

HTML5's form attribute, a designated sniper picking inputs associated with a form, even if they're not physically within:

<form id="form1" action="/action1" method="post"></form>

<input form="form1" type="text" name="field" />
<input form="form1" type="submit" value="Submit" />

CSS: Pulling the visual strings

Single form illusion? Step forward CSS positioning! Your tool to pull strings and make different forms appear unified:

.form-group {
  border: 1px solid #eee;
  padding: 20px;
  display: inline-block;
}

<div class="form-group">
  <!-- Poor form 1 -->
</div>
<div class="form-group">
  <!-- Poor form 2 -->
</div>

Pitfalls and circumventions

A word of caution, soldiering through codes involve navigating landmines called cross-browser compatibility. Plus, make sure your server knows to separate multiple form submissions. And of course, accessibility can't be sacrificed at the altar of JavaScript. Forewarned is forearmed!