在FORM中使用DIV是否正确?

时间:2012-03-30 12:01:54

标签: html semantic-markup

我只是想知道你在FORM-tag中对DIV-tag的看法是什么?

我需要这样的东西:

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

DIV内使用FORM或者我需要不同的东西是一般做法吗?

10 个答案:

答案 0 :(得分:116)

完全没问题。

form只会提交其输入类型控件(* TextareaSelect等等。)

您无需担心div中的form

答案 1 :(得分:24)

<form>代码中使用DIV是完全可以接受的。

如果您查看默认CSS 2.1 stylesheet,则divp都属于display: block类别。然后查看表单元素的HTML 4.01规范,它们不仅包含<p>标记,还包括<table>标记,因此当然<div>符合相同的标准。文档中的表单中还有一个<legend>标记。

例如,以下内容以严格模式传递HTML4验证:

<!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>

答案 2 :(得分:7)

您可以在表单中使用<div> - 那里没有问题.... 但是如果您要使用<div>作为标签input不... label是一个更好的选择:

<label for="myInput">My Label</label> 
<input type="textbox" name="MyInput" value="" />

答案 3 :(得分:2)

  

定义和用法

     

标签定义HTML文档中的分区或部分。

     

标记用于对块元素进行分组以使用它们进行格式化   样式。   http://www.w3schools.com/tags/tag_div.asp

另外DIV - MDN

  

HTML元素(或HTML文档分割元素)是   流内容的通用容器,它本身并不存在   代表什么。它可用于对样式进行分组   目的(使用class或id属性),或者因为它们共享   属性值,例如lang。它应该只在没有其他时使用   语义元素(如或)是合适的。

你可以在表格中使用div,如果你正在谈论使用div而不是表格,那么google关于无桌面网页设计

答案 4 :(得分:2)

&lt; input&gt;是错误的。作为&lt; form&gt;的直接子项

顺便说一下&lt; input / &gt;某些doctype可能会失败

使用http://validator.w3.org/check

进行检查

文档类型不允许元素“INPUT”;缺少“P”,“H1”,“H2”,“H3”,“H4”,“H5”,“H6”,“PRE”,“DIV”,“ADDRESS”开始标记

&lt; input type =“text”/&gt;

上述元素不允许出现在您放置它的上下文中;其他提到的元素是唯一允许存在的元素,并且可以包含所提到的元素。这可能意味着您需要一个包含元素,或者您可能忘记关闭前一个元素。

此消息的一个可能原因是您尝试将块级元素(例如“&lt; p&gt;”或“&lt; table&gt;”)放入内联元素(例如“&lt; a&gt; “,”&lt; span&gt;“或”&lt; font&gt;“)。

答案 5 :(得分:2)

您的问题没有解决您想要放入DIV标签的内容,这可能是您收到一些不完整/错误答案的原因。事实是,正如Royi所说,你可以将DIV标签放在你的表格中。例如,您不希望对标签执行此操作,但如果您有一个包含一堆复选框的表单,您希望将其布置为三列,那么请务必使用DIV标记(或SPAN,HEADER等) 。)完成你想要实现的外观和感觉。

答案 6 :(得分:0)

正如其他人所说,这一切都很好,你可以做得很好。就我个人而言,我尝试使用我的元素保持一种层次结构形式,div是最外层的父元素。我尝试在表单中仅使用table p ulspan。只是让我更容易跟踪我的网页中的父/子关系。

答案 7 :(得分:0)

我注意到,每当我在div中启动form标签时,随后的div兄弟都不会在我检查(chrome inspect)时成为表单的一部分,因此我的表单将永远不会提交。

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

我发现,如果将form标签放在DIV之外,那么它可以工作。表单标签应放在父DIV的开头。如下图所示。

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

答案 8 :(得分:-5)

绝对不是!它将呈现,但不会验证。使用标签。

这是不正确的。它无法访问。你在一些网站上看到它,因为一些开发人员只是懒惰。当我雇用开发人员时,这是我在候选人工作中检查的第一件事。表格很讨厌,但要花时间学会正确地做到这些

答案 9 :(得分:-8)

不,不是

始终滥用

<div>标记来创建Web布局。它的象征性目的是划分页面中的一个部分/部分,以便可以添加或应用单独的样式。 [w3schools Doc] [W3C]

这在很大程度上取决于您someanother的内容。

HTML5,具有更多逻辑含义标签,而不是简单的布局标签。 sectionheadernavaside一切都有自己的语义含义。并用于<div>