Can you nest html forms?

Question

Is it possible to nest html forms like this

<form name="mainForm">
  <form name="subForm">
  </form>
</form>

so that both forms work? My friend is having problems with this, a part of the subForm works, while another part of it does not.

Answer 1

No you cannot have a nested form. Instead you can open up a Modal that contains form and perform Ajax form submit.

Answer 2

Although the question is pretty old and I agree with the @everyone that nesting of form is not allowed in HTML

But this something all might want to see this

where you can hack(I'm calling it a hack since I'm sure this ain't legitimate) html to allow browser to have nested form

<form id="form_one" action="http://apple.com">
  <div>
    <div>
        <form id="form_two" action="/">
            <!-- DUMMY FORM TO ALLOW BROWSER TO ACCEPT NESTED FORM -->
      </form>
    </div>
      <br/>
    <div>
      <form id="form_three" action="http://www.linuxtopia.org/">
          <input type='submit' value='LINUX TOPIA'/>
      </form>
    </div>
      <br/>

    <div>
      <form id="form_four" action="http://bing.com">
          <input type='submit' value='BING'/>
      </form>
    </div>
      <br/>  
    <input type='submit' value='Apple'/>
  </div>  
</form>

JS FIDDLE LINK

http://jsfiddle.net/nzkEw/10/

Answer 3

Note you are not allowed to nest FORM elements!

http://www.w3.org/MarkUp/html3/forms.html

https://www.w3.org/TR/html4/appendix/changes.html#h-A.3.9 (html4 specification notes no changes regarding nesting forms from 3.2 to 4)

https://www.w3.org/TR/html4/appendix/changes.html#h-A.1.1.12 (html4 specification notes no changes regarding nesting forms from 4.0 to 4.1)

https://www.w3.org/TR/html5-diff/ (html5 specification notes no changes regarding nesting forms from 4 to 5)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms comments to "This feature allows authors to work around the lack of support for nested form elements.", but does not cite where this is specified, I think they are assuming that we should assume that it's specified in the html3 specification :)

Answer 4

Use empty form tag before your nested form

Tested and Worked on Firefox, Chrome

Not Tested on I.E.

<form name="mainForm" action="mainAction">
  <form></form>
  <form name="subForm"  action="subAction">
  </form>
</form>

Answer 5

You can also use formaction="" inside the button tag.

<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>

This would be nested in the original form as a separate button.

Answer 6

About nesting forms: I spent 10 years one afternoon trying to debug an ajax script.

my previous answer/example didn't account for the html markup, sorry.

<form id='form_1' et al>
  <input stuff>
  <submit onClick='ajaxFunction(That_Puts_form_2_In_The_ajaxContainer)' >
  <td id='ajaxContainer></td>
</form>

form_2 constantly failed saying invalid form_2.

When I moved the ajaxContainer that produced form_2 <i>outside</i> of form_1, I was back in business. It the answer the question as to why one might nest forms. I mean, really, what's the ID for if not to define which form is to be used? There must be a better, slicker work around.