Is it correct to use DIV inside FORM

Question

I m just wondering what are you thinking about DIV-tag inside FORM-tag   I need something like this    lt form gt     lt input type  text   gt     lt div gt  some  lt  div gt     lt div gt  another  lt  div gt     lt input type  text    gt   lt  form gt    Is it general practice to use DIV inside FORM or I need something different

User · Answer

It is wrong to have  lt input gt  as a direct child of a  lt form gt    And by the way  lt input   gt  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   lt input type  text    gt   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   lt p gt   or   lt table gt    inside an inline element  such as   lt a gt      lt span gt    or   lt font gt

User · Answer

No  its not  lt div gt  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  lt div gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

It is completely acceptable to use a DIV inside a  lt form gt  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  lt p gt  tags  but  lt table gt  tags  so of course  lt div gt  would meet the same criteria   There is also a  lt legend gt  tag inside the form in the documentation   For instance  the following passes HTML4 validation in strict mode    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt    lt html gt   lt head gt   lt META http-equiv  Content-Type  content  text html  charset utf-8  gt   lt title gt Test lt  title gt   lt  head gt   lt body gt   lt form id  test  action  test php  gt   lt div gt    Test   lt input name  blah  value  test  type  text  gt   lt  div gt   lt  form gt   lt  body gt   lt  html gt

User · Answer

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

User · Answer

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         lt div gt   lt form gt   lt input name  1st input   gt   lt  div gt   lt div gt   lt input name  2nd input   gt   lt  div gt   lt input type  submit   gt   lt  form gt    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         lt form gt   lt div gt   lt input name  1st input   gt   lt  div gt   lt div gt   lt input name  2nd input   gt   lt  div gt   lt input type  submit   gt   lt  form gt

User · Answer

You can use a  lt div gt  within a form - there is no problem there      BUT if you are going to use the  lt div gt  as the label for the input dont     label is a far better option     lt label for  myInput  gt My Label lt  label gt    lt input type  textbox  name  MyInput  value      gt

User · Answer

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

[html] Is it correct to use DIV inside FORM?

Examples related to html

Examples related to semantic-markup