101

I'm just wondering what are you thinking about DIV-tag inside FORM-tag?

I need something like this:

<form>
  <input type="text"/>
  <div> some </div>
  <div> another </div>
  <input type="text" />
</form>

Is it general practice to use DIV inside FORM or I need something different?

Starx
  • 77,474
  • 47
  • 185
  • 261
ceth
  • 44,198
  • 62
  • 180
  • 289

10 Answers10

155

It is totally fine .

The form will submit only its input type controls ( *also Textarea , Select , etc...).

You have nothing to worry about a div within a form.

Royi Namir
  • 144,742
  • 138
  • 468
  • 792
  • 4
    How about using a form inside a div ? – Kick Buttowski May 08 '17 at 06:00
  • 1
    @KickButtowski A form inside a div is no problem at all. You can try it yourself at a HTML validator. Besides, it is almost inevitable these days, since the modern pages are build on div's. If it was not allowed, a simple wrapper or placing the form in a container would already make the page invalid. – Nrzonline Sep 11 '17 at 17:19
  • 1
    Form validation has stopped working for me since I added divs inside the form – Suhas Aug 01 '18 at 07:26
33

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. Then looking at the HTML 4.01 specification for the form element, they include not only <p> tags, but <table> tags, so of course <div> would meet the same criteria. There is also a <legend> tag inside the form in the documentation.

For instance, the following passes HTML4 validation in strict mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<form id="test" action="test.php">
<div>
  Test: <input name="blah" value="test" type="text">
</div>
</form>
</body>
</html>
Alex W
  • 37,233
  • 13
  • 109
  • 109
11

You can use a <div> within a form - there is no problem there .... BUT if you are going to use the <div> as the label for the input dont ... label is a far better option :

<label for="myInput">My Label</label> 
<input type="textbox" name="MyInput" value="" />
Ry-
  • 218,210
  • 55
  • 464
  • 476
Manse
  • 37,765
  • 10
  • 83
  • 108
3

Your question doesn't address what you want to put in the DIV tags, which is probably why you've received some incomplete/wrong answers. The truth is that you can, as Royi said, put DIV tags inside of your forms. You don't want to do this for labels, for instance, but if you have a form with a bunch of checkboxes that you want to lay out into three columns, then by all means, use DIV tags (or SPAN, HEADER, etc.) to accomplish the look and feel you're trying to achieve.

Clinton
  • 31
  • 1
3

Definition and Usage

The tag defines a division or a section in an HTML document.

The tag is used to group block-elements to format them with styles. http://www.w3schools.com/tags/tag_div.asp

Also DIV - MDN

The HTML element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as or ) is appropriate.

You can use div inside form, if you are talking about using div instead of table, then google about Tableless web design

Habib
  • 219,104
  • 29
  • 407
  • 436
  • 3
    really? w3schools reference? – Adonis K. Kakoulidis Jan 28 '13 at 08:29
  • 2
    @AdonisK., I know all about why one should not include reference to w3schools, but I believe it doesn't deserve a downvote, I would request you to see this discussion on Meta: http://meta.stackexchange.com/questions/120025/will-i-be-downvoted-for-giving-a-w3schools-link Also I have updated reference of DIV from MDN – Habib Jan 28 '13 at 09:13
3

It is wrong to have <input> as a direct child of a <form>

And by the way <input /> may fail on some doctype

Check it with http://validator.w3.org/check


document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag

<input type="text" />

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

stefan bachert
  • 9,413
  • 4
  • 33
  • 40
1

As the others have said, it's all good, you can do it just fine. For me personally, I try to keep a form of hierarchical structure with my elements with a div being the outer most parent element. I try to use only table p ul and span inside forms. Just makes it easier for me to keep track of parent/children relationships inside my webpages.

JT Smith
  • 741
  • 4
  • 12
0

I noticed that whenever I would start the form tag inside a div the subsequent div siblings would not be part of the form when I inspect (chrome inspect) henceforth my form would never submit.

<div>
<form>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>

I figured that if I put the form tag outside the DIVs it worked. The form tag should be placed at the start of the parent DIV. Like shown below.

<form>
<div>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>
-5

Absolutely not! It will render, but it will not validate. Use a label.

It is not correct. It is not accessible. You see it on some websites because some developers are just lazy. When I am hiring developers, this is one of the first things I check for in candidates work. Forms are nasty, but take the time and learn to do them properly

-7

No, its not

<div> tags are always abused to create a web layout. Its symbolic purpose is to divide a section/portion in the page so that separate style can be added or applied to it. [w3schools Doc] [W3C]

It highly depends on what your some and another has.

HTML5, has more logical meaning tags, instead of having plain layout tags. The section, header, nav, aside everything have their own semantic meaning to it. And are used against <div>

Community
  • 1
  • 1
Starx
  • 77,474
  • 47
  • 185
  • 261
  • 1
    I tend to agree. There are _many_ things you _can_ do inside html. But because of those loose guidelines is why we find ourselves digging out of the mess of tabled web layouts with code full of hacks. The only way the web can grow is if we continue to follow the new guidelines as they are presented to us. – JT Smith Mar 30 '12 at 12:11
  • Well, I need a some area on web page. Users click on this areas and set values on form inputs. What HTML-element fits for this case? – ceth Mar 30 '12 at 12:15
  • 1
    @demas, For the use of your defination ` – Starx Mar 30 '12 at 12:17
  • 27
    -1 you are totaly wrong. EVERY BIG SITE use div inside a form. you gave in html 5 examples which has nothing to do with the question. show me one big site which doesnt have div within form. people here in this site throuws answers without checking and mislead other users – Royi Namir Mar 30 '12 at 12:46
  • @demas before you ask such question - check from big sites. and view their source. it is perfectly fine doing so. – Royi Namir Mar 30 '12 at 12:47
  • @RoyiNamir, No I am not wrong, I have clearly mentioned `it highly depends what your some and another has.` for the cases you are referring to. So chill – Starx Mar 30 '12 at 13:05
  • 4
    the way to not build something is to look at how enterprise code did it, as a rule. if you are only using those div's to contain text, if the text applies to the form controls, use a label. if not, use a p. semantics matter. accessibility matters. – albert Mar 30 '12 at 20:12