Is it possible to code a form over multiple divs?

Question

I'm coding an email subscription form (api's proving a nightmare on their own) and I was wondering if it is possible to write a form across divs, as per below...

<div id="topsubscribe_label">STAY UP TO DATE, JOIN OUR MAILING LIST: </div>     

<form id="signup" action="<?=$_SERVER['PHP_SELF']; ?>" method="get">
<div id="subforminputs">
<input type="email" name="email" id="email" class="toptextinput" value="" placeholder="you@example.com"/><br />
</div>      

<div id="topsubscribe_submit">
<input type="submit" id="topregisterButton" name="submit" class="textinput" value="Subscribe" />
</form>         
</div>

Will this break the form? Is there another (simple) way to do this?

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? — George Cummins, May 24 '13 at 16:18
So long as your markup is valid, you're fine. If you're not sure, use an HTML validator: http://html5.validator.nu/ — Matt Ball, May 24 '13 at 16:19
Please look here: http://stackoverflow.com/questions/9942538/is-it-correct-to-use-div-inside-form — cezar, May 24 '13 at 16:20
please note that if you wish to define different "zones" in your form , the `fieldset` tag may be of use — Laurent S., May 24 '13 at 16:20
When viewing @cezar's linked question, be careful to note the votes on the answers rather than just going with the one marked as "accepted." — George Cummins, May 24 '13 at 16:21

score 3 · Accepted Answer · edited May 24 '13 at 16:25

3

You can do this

<div>
  <div>
  <form>
  </form>
  </div>
</div>

You can also do this

<form>
  <div>
  </div>
  <div>
  </div>
</form>

But you cannot do this

<form>
  <div>
</form>
  </div>

Browser won't show any errors, you might have different output. Each browser handles these error diffrently.

edited May 24 '13 at 16:25

Sildoreth

1,883
1
25
38

answered May 24 '13 at 16:21

the_lotus

12,668
3
36
53

score 2 · Answer 2 · answered May 24 '13 at 16:22

This is acceptable:

<div>
  <form>
    <div><input /><input /></div>
    <div><input /><input /></div>
  </form>
</div>

This is not:

<div>
  <form>
    <input /><input />
</div>
<div>
    <input /><input />
  </form>
</div>

It may be worth noting that overlapping tags as in the 2nd example is invalid for all tags; not just form tags.

score 1 · Answer 3 · answered May 24 '13 at 16:21

1

If you just want to group some fields, you can use fieldset element.

answered May 24 '13 at 16:21

kirelagin

13,248
2
42
57

Is it possible to code a form over multiple divs?

3 Answers3