[html] Form inside a form, is that alright?

Whether we can have a form inside another form?. Is there any problem with that.

Yes there is. It is wrong. It won't work because it is wrong. Most browsers will only see one form.

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

No. HTML explicitly forbids nested forms.

From the HTML 5 draft:

Content model: Flow content, but with no form element descendants.

From the HTML 4.01 Recommendation:

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

(Note the -(FORM) section).

Form nesting can be achieved with new HTML5 input element's form attribute. Although we don't nest forms structurally, inputs are evaluated as they are in their own form. In my tests, 3 major browsers support this except IE(IE11). Form nesting limitation was a big obstacle for HTML UI design.

Here is a sample code, when you click Save button you should see "2 3 success" (Original http://www.impressivewebs.com/html5-form-attribute/):

<form id="saveForm" action="/post/dispatch/save" method="post"></form>
<form id="deleteForm" action="/post/dispatch/delete" method="post"></form>

<div id="toolbar">
    <input type="text" name="foo" form="saveForm" />
    <input type="hidden" value="some_id" form="deleteForm" />
    <input type="text" name="foo2" id="foo2" form="saveForm" value="success" />

    <input type="submit" name="save" value="Save" form="saveForm" onclick="alert(document.getElementById('deleteForm').elements.length + ' ' + document.getElementById('saveForm').elements.length + ' ' + document.getElementById('saveForm').elements['foo2'].value);return false;" />
    <input type="submit" name="delete" value="Delete" form="deleteForm" />
    <a href="/home/index">Cancel</a>
</div>

If you have a master form and are forced to have a "form with a form" Here is what you can do... in my case I had a link in the globalHeader and I wanted to perform a post when it was clicked:

Example form post with link button submit:

Instead of a form... wrap your input in a div:

 <div id="gap_form"><input type="hidden" name="PostVar"/><a id="myLink" href="javascript:Form2.submit()">A Link</a></div>

js file:

$(document).ready(function () {
(function () {
    $('#gap_form').wrap('<form id="Form2" action="http://sitetopostto.com/postpage" method="post" target="_blank"></form>');
})();});

This would wrap everything inside the div "gap_form" inside a form on the fly and the link would submit that form. I have this exact example working on a page now... (In my example...You could accomplish the same thing by redirecting to a new page and submitting the form on that page... but I like this better)

It's not valid XHTML to have to have nested forms. However, you can use multiple submit buttons and use a serverside script to run different codes depending on which button the users has clicked.

No we can't nest forms within another form like this

<form name='form1'>
      <form name='form2'>
            //some code here
      </form>
</form>

it will work in some cases but it is not recommended for universal platforms. You can use plenty of SUBMIT buttons inside a single form, but you can't manage a nested form appropriately.

Another workaround would be to initiate a modal window containing its own form

Nested forms are not supported and are not part of the w3c standard ( as many of you have stated ).

However HTML5 adds support for inputs that don't have to be descendants of any form, but can be submitted in several forms - by using the "form" attribute. This doesn't exactly allow nested forms, but by using this method, you can simulate nested forms.

The value of the "form" attribute must be id of the form, or in case of multiple forms, separate form id's with space.

You can read more here