omrakhur omrakhur - 15 days ago 7
HTML Question

Bootstrap form looks odd if multiple <form> tags exits but only one </form> end tag exits

I'm having this dilemma where my client wants me to have multiple forms on the same page. So what I've come up with is this:


  • 2x
    <row></row>
    tags

  • nested in first one are two
    <div class = "col-md-6"></div>

  • nested in the second are three
    <div class = "col-md-4"></div>



The problem is that I have multiple
<form>' tags for each of those
div
s but only one
` right before the submission button. However, it makes the the last four form sections all wobbly unless I add closing form tags. But once I do that, it only lets me submit data from the last div, which I don't want obviously, and the client wants to have five forms that "look" detached from each other.

At the moment the only Bootstrap functionality I can think of that allows me to do that is having different divs with their own forms. I'm open to suggestions.

Answer

You can't nest forms. The HTML parser will ignore the second <form> start tag. So don't do that.

What you can do is have multiple forms and associate form controls with the right form using the form attribute.

<form id=foo><p><input name=foo-a></p></form>
<form id=bar><p><input name=bar-a></p></form>
<p><input name=foo-b form=foo></p>