Can you nest html forms

Question

Is it possible to nest html forms like this   lt form name  mainForm  gt     lt form name  subForm  gt     lt  form gt   lt  form gt    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

User · Answer

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    lt form gt       lt div id  item1  gt           lt input type  text  name  foo 1  value  23  gt           lt input type  submit  name  submit 1  value  Submit Item  1  gt       lt  div gt       lt div id  item2  gt           lt input type  text  name  foo 2  value  33  gt           lt input type  submit  name  submit 2  value  Submit Item  2  gt       lt  div gt       lt input type  submit  name  submitAll  value  Submit All Items  gt   lt  form gt    Ok  so not much of an invention  but it does the job

User · Answer

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     lt form gt   lt input name  a name   gt   lt input name  a second name   gt   lt input name  subform another name    gt   lt input name  subform another second name    gt   lt  form gt    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    gt   a name value        a second name    gt   a second name value        subform    gt  array         another name    gt   a name value          another second name    gt   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

User · Answer

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

User · Answer

As Craig said  no   But  regarding your comment as to why   It might be easier to use 1  lt form gt  with the inputs and the  Update  button  and use copy hidden inputs with the  Submit Order  button in a another  lt form gt

User · Answer

The second form will be ignored  see the snippet from WebKit for example   bool HTMLParser  formCreateErrorCheck Token  t  RefPtr lt Node gt  amp  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

User · Answer

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    lt form id  formid  gt       lt input type  text  class  class1    gt       lt input type  text  class  class2  gt   lt  form gt    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

User · Answer

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

User · Answer

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    lt form id  form 1  et al gt     lt input stuff gt     lt submit onClick  ajaxFunction That Puts form 2 In The ajaxContainer    gt     lt td id  ajaxContainer gt  lt  td gt   lt  form gt    form 2 constantly failed saying invalid form 2   When I moved the ajaxContainer that produced form 2  lt i gt outside lt  i gt  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

User · Answer

Use empty form tag before your nested form Tested and Worked on Firefox  Chrome Not Tested on I E   lt form name  quot mainForm quot  action  quot mainAction quot  gt     lt form gt  lt  form gt     lt form name  quot subForm quot   action  quot subAction quot  gt     lt  form gt   lt  form gt   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   lt form name  quot mainForm quot  action  quot mainAction quot  gt     lt div gt         lt form gt  lt  form gt         lt form name  quot subForm quot   action  quot subAction quot  gt         lt  form gt     lt  div gt   lt  form gt

User · Answer

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   lt form id  form one  action  http   apple com  gt     lt div gt       lt div gt           lt form id  form two  action     gt               lt  -- DUMMY FORM TO ALLOW BROWSER TO ACCEPT NESTED FORM -- gt         lt  form gt       lt  div gt         lt br  gt       lt div gt         lt form id  form three  action  http   www linuxtopia org   gt             lt input type  submit  value  LINUX TOPIA   gt         lt  form gt       lt  div gt         lt br  gt        lt div gt         lt form id  form four  action  http   bing com  gt             lt input type  submit  value  BING   gt         lt  form gt       lt  div gt         lt br  gt         lt input type  submit  value  Apple   gt     lt  div gt     lt  form gt    JS FIDDLE LINK   http   jsfiddle net nzkEw 10

User · Answer

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   lt form id  form one  action  http   apple com  gt     lt div gt       lt div gt           lt form id  form two  action     gt               lt  -- DUMMY FORM TO ALLOW BROWSER TO ACCEPT NESTED FORM -- gt         lt  form gt       lt  div gt         lt br  gt       lt div gt         lt form id  form three  action  http   www linuxtopia org   gt             lt input type  submit  value  LINUX TOPIA   gt         lt  form gt       lt  div gt         lt br  gt        lt div gt         lt form id  form four  action  http   bing com  gt             lt input type  submit  value  BING   gt         lt  form gt       lt  div gt         lt br  gt         lt input type  submit  value  Apple   gt     lt  div gt     lt  form gt    JS FIDDLE LINK   http   jsfiddle net nzkEw 10

User · Answer

If you re using AngularJS  any  lt form gt  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  lt form gt  elements  so Angular provides the ngForm directive which behaves identically to  lt form gt  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 the ngRepeat directive    source

User · Answer

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  -

User · Answer

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

User · Answer

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

User · Answer

If you re using AngularJS  any  lt form gt  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  lt form gt  elements  so Angular provides the ngForm directive which behaves identically to  lt form gt  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 the ngRepeat directive    source

User · Answer

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

User · Answer

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

User · Answer

Really not possible    I couldn t nest form tags    However I used this code    lt form gt      OTHER FORM STUFF       lt div novalidate role  form  method  post  id  fake form id 0  data-url  YOUR POST URL  gt          THIS FORM STUFF      lt  div gt   lt  form gt    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

User · Answer

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  lt input gt  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  lt form gt  element an  lt input gt  element belongs to  The value of this attribute must be the id attribute of a  lt form gt  element in the same document       Scenario    input Form1 n1 input Form2 n1 input Form1 n2 input Form2 n2   Implementation    lt form id  Form1  action  Action1 php  method  post  gt  lt  form gt   lt form id  Form2  action  Action2 php  method  post  gt  lt  form gt    lt input type  text  name  input Form1 n1  form  Form1    gt   lt input type  text  name  input Form2 n1  form  Form2    gt   lt input type  text  name  input Form1 n2  form  Form1    gt   lt input type  text  name  input Form2 n2  form  Form2    gt    lt input type  submit  name  button1  value  buttonVal1  form  Form1    gt   lt input type  submit  name  button2  value  buttonVal2  form  Form2    gt    Here you ll find browser s compatibility

User · Answer

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

User · Answer

You can also use formaction    inside the button tag    lt button type  submit  formaction   rmDog  method  post  id  rmDog  gt - lt  button gt    This would be nested in the original form as a separate button

User · Answer

Really not possible    I couldn t nest form tags    However I used this code    lt form gt      OTHER FORM STUFF       lt div novalidate role  form  method  post  id  fake form id 0  data-url  YOUR POST URL  gt          THIS FORM STUFF      lt  div gt   lt  form gt    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

User · Answer

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    lt form id  form 1  et al gt     lt input stuff gt     lt submit onClick  ajaxFunction That Puts form 2 In The ajaxContainer    gt     lt td id  ajaxContainer gt  lt  td gt   lt  form gt    form 2 constantly failed saying invalid form 2   When I moved the ajaxContainer that produced form 2  lt i gt outside lt  i gt  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

User · Answer

Use empty form tag before your nested form Tested and Worked on Firefox  Chrome Not Tested on I E   lt form name  quot mainForm quot  action  quot mainAction quot  gt     lt form gt  lt  form gt     lt form name  quot subForm quot   action  quot subAction quot  gt     lt  form gt   lt  form gt   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   lt form name  quot mainForm quot  action  quot mainAction quot  gt     lt div gt         lt form gt  lt  form gt         lt form name  quot subForm quot   action  quot subAction quot  gt         lt  form gt     lt  div gt   lt  form gt

User · Answer

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

User · Answer

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

User · Answer

The second form will be ignored  see the snippet from WebKit for example   bool HTMLParser  formCreateErrorCheck Token  t  RefPtr lt Node gt  amp  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

User · Answer

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

User · Answer

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  lt input gt  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  lt form gt  element an  lt input gt  element belongs to  The value of this attribute must be the id attribute of a  lt form gt  element in the same document       Scenario    input Form1 n1 input Form2 n1 input Form1 n2 input Form2 n2   Implementation    lt form id  Form1  action  Action1 php  method  post  gt  lt  form gt   lt form id  Form2  action  Action2 php  method  post  gt  lt  form gt    lt input type  text  name  input Form1 n1  form  Form1    gt   lt input type  text  name  input Form2 n1  form  Form2    gt   lt input type  text  name  input Form1 n2  form  Form1    gt   lt input type  text  name  input Form2 n2  form  Form2    gt    lt input type  submit  name  button1  value  buttonVal1  form  Form1    gt   lt input type  submit  name  button2  value  buttonVal2  form  Form2    gt    Here you ll find browser s compatibility

User · Answer

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    lt form gt       lt div id  item1  gt           lt input type  text  name  foo 1  value  23  gt           lt input type  submit  name  submit 1  value  Submit Item  1  gt       lt  div gt       lt div id  item2  gt           lt input type  text  name  foo 2  value  33  gt           lt input type  submit  name  submit 2  value  Submit Item  2  gt       lt  div gt       lt input type  submit  name  submitAll  value  Submit All Items  gt   lt  form gt    Ok  so not much of an invention  but it does the job

User · Answer

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   lt div class  divformTagEx  gt    lt  div gt    lt asp Literal runat  server  ID  litFormTag  Visible  false  gt    lt div gt   lt form  style  margin-bottom  3   action  http   login php  method  post  name  testformtag  gt  lt  form gt   lt  div gt   lt  asp Literal gt    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

User · Answer

As Craig said  no   But  regarding your comment as to why   It might be easier to use 1  lt form gt  with the inputs and the  Update  button  and use copy hidden inputs with the  Submit Order  button in a another  lt form gt

User · Answer

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   lt div class  divformTagEx  gt    lt  div gt    lt asp Literal runat  server  ID  litFormTag  Visible  false  gt    lt div gt   lt form  style  margin-bottom  3   action  http   login php  method  post  name  testformtag  gt  lt  form gt   lt  div gt   lt  asp Literal gt    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

User · Answer

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

User · Answer

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  -

User · Answer

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

User · Answer

As Craig said  no   But  regarding your comment as to why   It might be easier to use 1  lt form gt  with the inputs and the  Update  button  and use copy hidden inputs with the  Submit Order  button in a another  lt form gt

User · Answer

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    lt form id  main-form  action   main-action  method  post  gt  lt  form gt   lt form id  sub-form   action   sub-action   method  post  gt  lt  form gt    lt div class  main-component  gt       lt input type  text  name  main-property1  form  main-form    gt       lt input type  text  name  main-property2  form  main-form    gt        lt div class  sub-component  gt           lt input type  text  name  sub-property1  form  sub-form    gt           lt input type  text  name  sub-property2  form  sub-form    gt           lt input type  submit  name  sub-save  value  Save  form  sub-form    gt       lt  div gt        lt input type  submit  name  main-save  value  Save  form  main-form    gt   lt  div gt    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

User · Answer

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     lt form gt   lt input name  a name   gt   lt input name  a second name   gt   lt input name  subform another name    gt   lt input name  subform another second name    gt   lt  form gt    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    gt   a name value        a second name    gt   a second name value        subform    gt  array         another name    gt   a name value          another second name    gt   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

User · Answer

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    lt form id  formid  gt       lt input type  text  class  class1    gt       lt input type  text  class  class2  gt   lt  form gt    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

User · Answer

As Craig said  no   But  regarding your comment as to why   It might be easier to use 1  lt form gt  with the inputs and the  Update  button  and use copy hidden inputs with the  Submit Order  button in a another  lt form gt

User · Answer

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

User · Answer

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    lt form id  main-form  action   main-action  method  post  gt  lt  form gt   lt form id  sub-form   action   sub-action   method  post  gt  lt  form gt    lt div class  main-component  gt       lt input type  text  name  main-property1  form  main-form    gt       lt input type  text  name  main-property2  form  main-form    gt        lt div class  sub-component  gt           lt input type  text  name  sub-property1  form  sub-form    gt           lt input type  text  name  sub-property2  form  sub-form    gt           lt input type  submit  name  sub-save  value  Save  form  sub-form    gt       lt  div gt        lt input type  submit  name  main-save  value  Save  form  main-form    gt   lt  div gt    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

User · Answer

You can also use formaction    inside the button tag    lt button type  submit  formaction   rmDog  method  post  id  rmDog  gt - lt  button gt    This would be nested in the original form as a separate button

User · Answer

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

[html] Can you nest html forms?

Examples related to html

Examples related to nested-forms