Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you have a single logical <form> split across multiple <div>s?

Tags:

html

In my existing web page layout, which involves multiple files, one specifying the high-level layout, there are two elements, one for a left column, and one for a right column.

I want to have a single logical <form> (with a single action) where <input> elements are spread across both the left column and the right column. Is the only way to do this have the element be parent to both <div>s (and refactor my layout code), or is it possible to do something like <form [something]> inside both divs, so that clicking submit in one form submits all the inputs from both forms?

like image 637
Tim Lovell-Smith Avatar asked Dec 14 '12 18:12

Tim Lovell-Smith


People also ask

Can a form have multiple divs?

You can use multiple divs within a form, but you cannot close a parent before the child is closed. What are you attempting to accomplish? – Laurent S.

Can DIVS be in form?

It is completely acceptable to use a DIV inside a <form> tag. If you look at the default CSS 2.1 stylesheet, div and p are both in the display: block category.

How do I put multiple lines in one div?

By default, if we have multiple div tags it will be displayed one below the other. In othere words, each div will be displayed in a separate line. To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values.


2 Answers

I think people are missing the question. A <form> can contain whatever elements it needs. If the layout of your page is something like:

<body>
    <div id="leftColumn"><input name="foo" type="text"></div>
    <div id="rightColumn"><input name="bar" type="text"></div>
<body>

You don't need separate foo and bar forms. You can happily encase both of those <div>s inside a single <form> element:

<body>
    <form name="onlyOneForm">
        <div id="leftColumn"><input name="foo" type="text"></div>
        <div id="rightColumn"><input name="bar" type="text"></div>
    </form>
<body>
like image 81
joequincy Avatar answered Oct 05 '22 23:10

joequincy


The only way to submit both forms is to wrap both <div>s within a single <form> tag. Or, you can use jQuery/JavaScript to aggregate the data and submit them together as one submission.

like image 34
John Conde Avatar answered Oct 05 '22 23:10

John Conde