Is It Valid to Have a HTML Form Inside Another HTML Form

Is it valid to have a html form inside another html form?

A. It is not valid HTML nor XHTML

In the official W3C XHTML specification, Section B. "Element Prohibitions", states that:

"form must not contain other form elements."

http://www.w3.org/TR/xhtml1/#prohibitions

As for the older HTML 3.2 spec,
the section on the FORMS element states that:

"Every form must be enclosed within a
FORM element. There can be several
forms in a single document, but the
FORM element can't be nested."

B. The Workaround

There are workarounds using JavaScript without needing to nest form tags.

"How to create a nested form." (despite title this is not nested form tags, but a JavaScript workaround).

Answers to this StackOverflow question

Note: Although one can trick the W3C Validators to pass a page by manipulating the DOM via scripting, it's still not legal HTML. The problem with using such approaches is that the behavior of your code is now not guaranteed across browsers. (since it's not standard)

Form inside a form, is that alright?

Though you can have several <form> elements in one HTML page, you cannot nest them.

Can you nest html forms?

In a word, no. You can have several forms in a page but they should not be nested.

From the html5 working draft:

4.10.3 The form element

Content model:

Flow content, but with no form element descendants.

Can I nest form tags in other form tags?

No, nested forms are forbidden.

This is expressed in the HTML 4.01 DTDs as:

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->

— http://www.w3.org/TR/html4/interact/forms.html#h-17.3

This means A FORM has a mandatory start tag, mandatory end tag and can contain anything in %block or SCRIPT, except other FORMs.

XML DTDs aren't as expressive as SGML DTDs so in XHTML this rule is specified only in the human readable text of the specification:

form must not contain other form elements.

— http://www.w3.org/TR/xhtml1/#prohibitions

HTML 5 isn't an SGML application and doesn't have an official machine readable description of the language. It also expresses this rule in text:

Content model:

Flow content, but with no form element descendants.

— http://www.w3.org/TR/html5/forms.html#the-form-element

Is it valid to have an HTML form inside of a 'section' tag?

Yes it is valid.

The HTML5 spec says that it can contain any flow content, where flow content is:

Most elements that are used in the body of documents and applications are categorized as flow content.

a abbr address area (if it is a descendant of a map element) article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style (if the scoped attribute is present) sub sup svg table textarea time u ul var video wbr text

If was still irking you, you could point him to this note:

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

How do you overcome the HTML form nesting limitation?

I would implement this exactly as you described: submit everything to the server and do a simple if/else to check what button was clicked.

And then I would implement a Javascript call tying into the form's onsubmit event which would check before the form was submitted, and only submit the relevant data to the server (possibly through a second form on the page with the ID needed to process the thing as a hidden input, or refresh the page location with the data you need passed as a GET request, or do an Ajax post to the server, or...).

This way the people without Javascript are able to use the form just fine, but the server load is offset because the people who do have Javascript are only submitting the single piece of data needed. Getting yourself focused on only supporting one or the other really limits your options unnecessarily.

Alternatively, if you're working behind a corporate firewall or something and everybody has Javascript disabled, you might want to do two forms and work some CSS magic to make it look like the delete button is part of the first form.

HTML submit a post inside another form

Don't nest forms, it's invalid and makes no sense.

Use a data attribute on your submit buttons to change the action of the form.

//Get all inputs with the data-action data attribute
document.querySelectorAll("input[data-action]").forEach(item => {
  item.addEventListener("click", function(event) {
    //Get the form element
    let form = this.closest("form");
    //Set the action from the data attribute
    form.action = this.dataset.action;
    
    //loop top level fieldsets
    form.querySelectorAll("fieldset").forEach(fieldset =>  {
      //if the fieldset doesn't conttain the clicked button
      if(fieldset.querySelector("input[data-action]") != this) {
        //Iterate the inputs and disable them to remove from form submit
        fieldset.querySelectorAll("input, select, textbox").forEach(item => item.disabled = true);
      }
    });
  });
});

//Purely for demo purposes
document.querySelector("form").addEventListener("submit", function(e){
  e.preventDefault();
  console.log(this.action);
  return  false;
})

<form action="/action1.php" method="post">
  <fieldset>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="Submit" data-action="/action1.php">
  </fieldset>
  <fieldset>
    <label for="fname">Another form first:</label>
    <input type="text" id="fname2" name="fname2"><br><br>
    <label for="lname">Another form last:</label>
    <input type="text" id="lname2" name="lname2"><br><br>
    <input type="submit" value="Submit" data-action="/action2.php">
  </fieldset>

</form>