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.
This question is related to
html
nested-forms
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 :)
As Craig said, no.
But, regarding your comment as to why:
It might be easier to use 1 <form> with the inputs and the "Update" button, and use copy hidden inputs with the "Submit Order" button in a another <form>.
I ran into a similar problem, and I know that is not an answer to the question, but it can be of help to someone with this kind of problem:
if there is need to put the elements of two or more forms in a given sequence, the HTML5 <input> form attribute can be the solution.
From http://www.w3schools.com/tags/att_input_form.asp:
- The form attribute is new in HTML5.
- Specifies which
<form>element an<input>element belongs to. The value of this attribute must be the id attribute of a<form>element in the same document.
Scenario:
Implementation:
<form id="Form1" action="Action1.php" method="post"></form>
<form id="Form2" action="Action2.php" method="post"></form>
<input type="text" name="input_Form1_n1" form="Form1" />
<input type="text" name="input_Form2_n1" form="Form2" />
<input type="text" name="input_Form1_n2" form="Form1" />
<input type="text" name="input_Form2_n2" form="Form2" />
<input type="submit" name="button1" value="buttonVal1" form="Form1" />
<input type="submit" name="button2" value="buttonVal2" form="Form2" />
Here you'll find browser's compatibility.
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.
Really not possible... I couldn't nest form tags... However I used this code:
<form>
OTHER FORM STUFF
<div novalidate role="form" method="post" id="fake_form_id_0" data-url="YOUR_POST_URL">
THIS FORM STUFF
</div>
</form>
with {% csrf_token %} and stuff
and applied some JS
var url = $(form_id).attr("data-url");
$.ajax({
url: url,
"type": "POST",
"data": {
'csrfmiddlewaretoken': '{{ csrf_token }}',
'custom-param-attachment': 'value'
},
success: function (e, data) {
if (e.is_valid) {
DO STUFF
}
}
});
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 :)
Even if you could get it to work in one browser, there's no guarantee that it would work the same in all browsers. So while you might be able to get it to work some of the time, you certainly wouldn't be able to get it to work all of the time.
Before I knew I wasn't supposed to do this I had nested forms for the purpose of having multiple submit buttons. Ran that way for 18 months, thousands of signup transactions, no one called us about any difficulties.
Nested forms gave me an ID to parse for the correct action to take. Didn't break 'til I tried to attach a field to one of the buttons and Validate complained. Wasn't a big deal to untangle it--I used an explicit stringify on the outer form so it didn't matter the submit and form didn't match. Yeah, yeah, should've taken the buttons from a submit to an onclick.
Point is there are circumstances where it's not entirely broken. But "not entirely broken" is perhaps too low a standard to shoot for :-)
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.
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
If you're using AngularJS, any <form> tags inside your ng-app are replaced at runtime with ngForm directives that are designed to be nested.
In Angular forms can be nested. This means that the outer form is valid when all of the child forms are valid as well. However, browsers do not allow nesting of
<form>elements, so Angular provides thengFormdirective which behaves identically to<form>but can be nested. This allows you to have nested forms, which is very useful when using Angular validation directives in forms that are dynamically generated using thengRepeatdirective. (source)
Even if you could get it to work in one browser, there's no guarantee that it would work the same in all browsers. So while you might be able to get it to work some of the time, you certainly wouldn't be able to get it to work all of the time.
The second form will be ignored, see the snippet from WebKit for example:
bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr<Node>& result)
{
// Only create a new form if we're not already inside one.
// This is consistent with other browsers' behavior.
if (!m_currentFormElement) {
m_currentFormElement = new HTMLFormElement(formTag, m_document);
result = m_currentFormElement;
pCloserCreateErrorCheck(t, result);
}
return false;
}
A simple workaround is to use a iframe to hold the "nested" form. Visually the form is nested but on the code side its in a separate html file altogether.
While I don't present a solution to nested forms (it doesn't work reliably), I do present a workaround that works for me:
Usage scenario: A superform allowing to change N items at once. It has a "Submit All" button at the bottom. Each item wants to have its own nested form with a "Submit Item # N" button. But can't...
In this case, one can actually use a single form, and then have the name of the buttons be submit_1..submit_N and submitAll and handle it servers-side, by only looking at params ending in _1 if the name of the button was submit_1.
<form>
<div id="item1">
<input type="text" name="foo_1" value="23">
<input type="submit" name="submit_1" value="Submit Item #1">
</div>
<div id="item2">
<input type="text" name="foo_2" value="33">
<input type="submit" name="submit_2" value="Submit Item #2">
</div>
<input type="submit" name="submitAll" value="Submit All Items">
</form>
Ok, so not much of an invention, but it does the job.
If you're using AngularJS, any <form> tags inside your ng-app are replaced at runtime with ngForm directives that are designed to be nested.
In Angular forms can be nested. This means that the outer form is valid when all of the child forms are valid as well. However, browsers do not allow nesting of
<form>elements, so Angular provides thengFormdirective which behaves identically to<form>but can be nested. This allows you to have nested forms, which is very useful when using Angular validation directives in forms that are dynamically generated using thengRepeatdirective. (source)
No you cannot have a nested form. Instead you can open up a Modal that contains form and perform Ajax form submit.
As Craig said, no.
But, regarding your comment as to why:
It might be easier to use 1 <form> with the inputs and the "Update" button, and use copy hidden inputs with the "Submit Order" button in a another <form>.
Today, I also got stuck in same issue, and resolve the issue I have added a user control and
on this control I use this code
<div class="divformTagEx">
</div>
<asp:Literal runat="server" ID="litFormTag" Visible="false">
'<div> <form style="margin-bottom: 3;" action="http://login.php" method="post" name="testformtag"></form> </div>'</asp:Literal>
and on PreRenderComplete event of the page call this method
private void InitializeJavaScript()
{
var script = new StringBuilder();
script.Append("$(document).ready(function () {");
script.Append("$('.divformTagEx').append( ");
script.Append(litFormTag.Text);
script.Append(" )");
script.Append(" });");
ScriptManager.RegisterStartupScript(this, GetType(), "nestedFormTagEx", script.ToString(), true);
}
I believe this will help.
Even if you could get it to work in one browser, there's no guarantee that it would work the same in all browsers. So while you might be able to get it to work some of the time, you certainly wouldn't be able to get it to work all of the time.
Another way to get around this problem, if you are using some server side scripting language that allows you to manipulate the posted data, is to declare your html form like this :
<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>
If you print the posted data (I will use PHP here), you will get an array like this :
//print_r($_POST) will output :
array(
'a_name' => 'a_name_value',
'a_second_name' => 'a_second_name_value',
'subform' => array(
'another_name' => 'a_name_value',
'another_second_name' => 'another_second_name_value',
),
);
Then you can just do something like :
$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);
Your $_POST now has only your "main form" data, and your subform data is stored in another variable you can manipulate at will.
Hope this helps!
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
As it's 2019 I'd like to give an updated answer to this question. It is possible to achieve the same result as nested forms, but without nesting them. HTML5 introduced the form attribute. You can add the form attribute to form controls outside of a form to link them to a specific form element (by id).
https://www.impressivewebs.com/html5-form-attribute/
This way you can structure your html like this:
<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form" action="/sub-action" method="post"></form>
<div class="main-component">
<input type="text" name="main-property1" form="main-form" />
<input type="text" name="main-property2" form="main-form" />
<div class="sub-component">
<input type="text" name="sub-property1" form="sub-form" />
<input type="text" name="sub-property2" form="sub-form" />
<input type="submit" name="sub-save" value="Save" form="sub-form" />
</div>
<input type="submit" name="main-save" value="Save" form="main-form" />
</div>
The form attribute is supported by all modern browsers. IE does not support this though but IE is not a browser anymore, rather a compatibility tool, as confirmed by Microsoft itself: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/. It's about time we stop caring about making things work in IE.
https://caniuse.com/#feat=form-attribute
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form
From the html spec:
This feature allows authors to work around the lack of support for nested form elements.
I ran into a similar problem, and I know that is not an answer to the question, but it can be of help to someone with this kind of problem:
if there is need to put the elements of two or more forms in a given sequence, the HTML5 <input> form attribute can be the solution.
From http://www.w3schools.com/tags/att_input_form.asp:
- The form attribute is new in HTML5.
- Specifies which
<form>element an<input>element belongs to. The value of this attribute must be the id attribute of a<form>element in the same document.
Scenario:
Implementation:
<form id="Form1" action="Action1.php" method="post"></form>
<form id="Form2" action="Action2.php" method="post"></form>
<input type="text" name="input_Form1_n1" form="Form1" />
<input type="text" name="input_Form2_n1" form="Form2" />
<input type="text" name="input_Form1_n2" form="Form1" />
<input type="text" name="input_Form2_n2" form="Form2" />
<input type="submit" name="button1" value="buttonVal1" form="Form1" />
<input type="submit" name="button2" value="buttonVal2" form="Form2" />
Here you'll find browser's compatibility.
Plain html cannot allow you to do this. But with javascript you can be able to do that. If you are using javascript/jquery you could classify your form elements with a class and then use serialize() to serialize only those form elements for the subset of the items you want to submit.
<form id="formid">
<input type="text" class="class1" />
<input type="text" class="class2">
</form>
Then in your javascript you could do this to serialize class1 elements
$(".class1").serialize();
For class2 you could do
$(".class2").serialize();
For the whole form
$("#formid").serialize();
or simply
$("#formid").submit();
No you cannot have a nested form. Instead you can open up a Modal that contains form and perform Ajax form submit.
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.
Before I knew I wasn't supposed to do this I had nested forms for the purpose of having multiple submit buttons. Ran that way for 18 months, thousands of signup transactions, no one called us about any difficulties.
Nested forms gave me an ID to parse for the correct action to take. Didn't break 'til I tried to attach a field to one of the buttons and Validate complained. Wasn't a big deal to untangle it--I used an explicit stringify on the outer form so it didn't matter the submit and form didn't match. Yeah, yeah, should've taken the buttons from a submit to an onclick.
Point is there are circumstances where it's not entirely broken. But "not entirely broken" is perhaps too low a standard to shoot for :-)
As Craig said, no.
But, regarding your comment as to why:
It might be easier to use 1 <form> with the inputs and the "Update" button, and use copy hidden inputs with the "Submit Order" button in a another <form>.
The second form will be ignored, see the snippet from WebKit for example:
bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr<Node>& result)
{
// Only create a new form if we're not already inside one.
// This is consistent with other browsers' behavior.
if (!m_currentFormElement) {
m_currentFormElement = new HTMLFormElement(formTag, m_document);
result = m_currentFormElement;
pCloserCreateErrorCheck(t, result);
}
return false;
}
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.
As Craig said, no.
But, regarding your comment as to why:
It might be easier to use 1 <form> with the inputs and the "Update" button, and use copy hidden inputs with the "Submit Order" button in a another <form>.
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>
EDIT by @adusza: As the commenters pointed out, the above code does not result in nested forms. However, if you add div elements like below, you will have subForm inside mainForm, and the first blank form will be removed.
<form name="mainForm" action="mainAction">
<div>
<form></form>
<form name="subForm" action="subAction">
</form>
</div>
</form>
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>
EDIT by @adusza: As the commenters pointed out, the above code does not result in nested forms. However, if you add div elements like below, you will have subForm inside mainForm, and the first blank form will be removed.
<form name="mainForm" action="mainAction">
<div>
<form></form>
<form name="subForm" action="subAction">
</form>
</div>
</form>
Plain html cannot allow you to do this. But with javascript you can be able to do that. If you are using javascript/jquery you could classify your form elements with a class and then use serialize() to serialize only those form elements for the subset of the items you want to submit.
<form id="formid">
<input type="text" class="class1" />
<input type="text" class="class2">
</form>
Then in your javascript you could do this to serialize class1 elements
$(".class1").serialize();
For class2 you could do
$(".class2").serialize();
For the whole form
$("#formid").serialize();
or simply
$("#formid").submit();
Another way to get around this problem, if you are using some server side scripting language that allows you to manipulate the posted data, is to declare your html form like this :
<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>
If you print the posted data (I will use PHP here), you will get an array like this :
//print_r($_POST) will output :
array(
'a_name' => 'a_name_value',
'a_second_name' => 'a_second_name_value',
'subform' => array(
'another_name' => 'a_name_value',
'another_second_name' => 'another_second_name_value',
),
);
Then you can just do something like :
$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);
Your $_POST now has only your "main form" data, and your subform data is stored in another variable you can manipulate at will.
Hope this helps!
A simple workaround is to use a iframe to hold the "nested" form. Visually the form is nested but on the code side its in a separate html file altogether.
Really not possible... I couldn't nest form tags... However I used this code:
<form>
OTHER FORM STUFF
<div novalidate role="form" method="post" id="fake_form_id_0" data-url="YOUR_POST_URL">
THIS FORM STUFF
</div>
</form>
with {% csrf_token %} and stuff
and applied some JS
var url = $(form_id).attr("data-url");
$.ajax({
url: url,
"type": "POST",
"data": {
'csrfmiddlewaretoken': '{{ csrf_token }}',
'custom-param-attachment': 'value'
},
success: function (e, data) {
if (e.is_valid) {
DO STUFF
}
}
});
Today, I also got stuck in same issue, and resolve the issue I have added a user control and
on this control I use this code
<div class="divformTagEx">
</div>
<asp:Literal runat="server" ID="litFormTag" Visible="false">
'<div> <form style="margin-bottom: 3;" action="http://login.php" method="post" name="testformtag"></form> </div>'</asp:Literal>
and on PreRenderComplete event of the page call this method
private void InitializeJavaScript()
{
var script = new StringBuilder();
script.Append("$(document).ready(function () {");
script.Append("$('.divformTagEx').append( ");
script.Append(litFormTag.Text);
script.Append(" )");
script.Append(" });");
ScriptManager.RegisterStartupScript(this, GetType(), "nestedFormTagEx", script.ToString(), true);
}
I believe this will help.
As it's 2019 I'd like to give an updated answer to this question. It is possible to achieve the same result as nested forms, but without nesting them. HTML5 introduced the form attribute. You can add the form attribute to form controls outside of a form to link them to a specific form element (by id).
https://www.impressivewebs.com/html5-form-attribute/
This way you can structure your html like this:
<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form" action="/sub-action" method="post"></form>
<div class="main-component">
<input type="text" name="main-property1" form="main-form" />
<input type="text" name="main-property2" form="main-form" />
<div class="sub-component">
<input type="text" name="sub-property1" form="sub-form" />
<input type="text" name="sub-property2" form="sub-form" />
<input type="submit" name="sub-save" value="Save" form="sub-form" />
</div>
<input type="submit" name="main-save" value="Save" form="main-form" />
</div>
The form attribute is supported by all modern browsers. IE does not support this though but IE is not a browser anymore, rather a compatibility tool, as confirmed by Microsoft itself: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/. It's about time we stop caring about making things work in IE.
https://caniuse.com/#feat=form-attribute
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form
From the html spec:
This feature allows authors to work around the lack of support for nested form elements.
While I don't present a solution to nested forms (it doesn't work reliably), I do present a workaround that works for me:
Usage scenario: A superform allowing to change N items at once. It has a "Submit All" button at the bottom. Each item wants to have its own nested form with a "Submit Item # N" button. But can't...
In this case, one can actually use a single form, and then have the name of the buttons be submit_1..submit_N and submitAll and handle it servers-side, by only looking at params ending in _1 if the name of the button was submit_1.
<form>
<div id="item1">
<input type="text" name="foo_1" value="23">
<input type="submit" name="submit_1" value="Submit Item #1">
</div>
<div id="item2">
<input type="text" name="foo_2" value="33">
<input type="submit" name="submit_2" value="Submit Item #2">
</div>
<input type="submit" name="submitAll" value="Submit All Items">
</form>
Ok, so not much of an invention, but it does the job.
Source: Stackoverflow.com