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

Question

Is it valid html to have the following    lt form action  a  gt       lt input     gt       lt form action  b  gt           lt input     gt           lt input     gt           lt input     gt       lt  form gt       lt input     gt   lt  form gt    So when you submit  b  you only get the fields within the inner form  When you submit  a  you get all fields minus those within  b    If it isn t possible  what workarounds for this situation are available

User · Answer

A non-JavaScript workaround for nesting form tags:

Because you allow for

all fields minus those within "b".

when submitting "a", the following would work, using regular web-forms without fancy JavaScript tricks:

Step 1. Put each form on its own web page.

Step 2. Insert an iframe wherever you want this sub-form to appear.

Step 3. Profit.

I tried to use a code-playground website to show a demo, but many of them prohibit embedding their websites in iframes, even within their own domain.

User · Answer

As workaround you could use formaction attribute on submit button  And just use different names on your inputs   lt form action  quot a quot  gt   lt input     gt       lt  -- Form 2 inputs -- gt       lt input     gt       lt input     gt       lt input     gt       lt input type  quot submit quot  formaction  quot b quot  gt    lt  form gt   lt input     gt

User · Answer

As others have said  it is not valid HTML   It sounds like your are doing this to position the forms visually within each other  If that is the case  just do two separate forms and use CSS to position them

User · Answer

rather use a custom javascript-method inside the action attribute of the form   eg   lt html gt       lt head gt           lt script language  javascript  type  text javascript  gt          var input1   null          var input2   null          function InitInputs                 if  input1    null                    input1   document getElementById  input1                              if  input2    null                    input2   document getElementById  input2                               if  input1    null                    alert  input1 missing                              if  input2    null                    alert  input2 missing                                    function myMethod1                 InitInputs                alert input1 value         input2 value                     function myMethod2                 InitInputs                alert input1 value                      lt  script gt       lt  head gt       lt body gt           lt form action  javascript myMethod1     gt               lt input id  input1  type  text    gt               lt input id  input2  type  text    gt               lt input type  button  onclick  myMethod2    value  myMethod2   gt               lt input type  submit  value  myMethod1    gt           lt  form gt       lt  body gt   lt  html gt

User · Answer

In case someone find this post here is a great solution without the need of JS  Use two submit buttons with different name attributes check in your server language which submit button was pressed cause only one of them will be sent to the server    lt form method  post  action  ServerFileToExecute php  gt       lt input type  submit  name  save  value  Click here to save    gt       lt input type  submit  name  delete  value  Click here to delete    gt   lt  form gt    The server side could look something like this if you use php    lt  php     if isset   POST  save             echo  Stored        else if isset   POST  delete             echo  Deleted        else         echo  Action is missing      gt

User · Answer

HTML 4 x  amp  HTML5 disallow nested forms  but HTML5 will allow a workaround with  form  attribute   form owner     As for HTML 4 x you can    Use an extra form s  with only hidden fields  amp  JavaScript to set its input s and submit the form  Use CSS to line up several HTML form to look like a single entity - but I think that s too hard

User · Answer

No  the HTML specification states that no FORM element should contain another FORM element

User · Answer

A possibility is to have an iframe inside the outer form  The iframe contains the inner form  Make sure to use the  lt base target   parent    gt  tag inside the head tag of the iframe to make the form behave as part of the main page

User · Answer

You can answer your own question very easily by inputting the HTML code into the W3 Validator   It features a text input field  you won t even have to put your code on a server       And no  it won t validate

User · Answer

No  it is not valid  But a  solution  can be creating a modal window outside of form  a  containing the form  b     lt div id  myModalFormB  class  modal  gt       lt form action  b  gt           lt input     gt           lt input     gt           lt input     gt           lt button type  submit  gt Save lt  button gt       lt  form gt   lt  div gt    lt form action  a  gt       lt input     gt       lt a href   myModalFormB  gt Open modal b  lt  a gt       lt input     gt   lt  form gt    It can be easily done if you are using bootstrap or materialize css   I m doing this to avoid using iframe

User · Answer

no  see w3c

User · Answer

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

User · Answer

If you need your form to submit commit data to a 1 M relational database  I would recommend creating an  after insert  DB trigger on table A that will insert the necessary data for table B

User · Answer

No  it is not valid but you can trick your inner form position on the HTML with a help of CSS and jQuery usage  First create some container div inside your parent form and then in any other place on the page the div with your child  inner  form   lt form action  quot a quot  gt       lt input     gt       lt div class  quot row quot  id  quot other form container quot  gt  lt  div gt       lt input     gt   lt  form gt         lt div class  quot row quot  id  quot other form quot  gt       lt form action  quot b quot  gt           lt input     gt           lt input     gt           lt input     gt       lt  form gt   lt  div gt   Give your container div some stable heaght  lt style gt     other form container       height 90px      position relative       lt  style gt    Thank trick the  quot other form quot  position relatively to container div   lt script gt      document  ready function         var pos      quot  other form container quot   position           quot  other form quot   css         position   quot absolute quot         top  pos top - 40        left  pos left   7        width  500         show           lt  script gt   P S   You ll have to play with numbers to make it look nice

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

A non-JavaScript workaround for nesting form tags:

Examples related to html

Examples related to web-standards

Examples related to standards-compliance