在FORM中使用DIV是否正确？答案

【问题标题】：Is it correct to use DIV inside FORM?在FORM中使用DIV是否正确？
【发布时间】：2012-03-30 12:01:54
【问题描述】：

我只是想知道您对 FORM-tag 中的 DIV-tag 有什么看法？

我需要这样的东西：

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

在FORM 中使用DIV 是一般做法还是我需要不同的东西？

【问题讨论】：

标签： html semantic-markup

【解决方案1】：

完全没问题。

form 将仅提交其输入类型控件（ *also Textarea , Select 等...）。

您无需担心form 中的div。

【讨论】：

在 div 中使用表单怎么样？
@KickButtowski div 中的表单完全没有问题。您可以在 HTML 验证器上自己尝试。此外，如今这几乎是不可避免的，因为现代页面是建立在 div 之上的。如果不允许，简单的包装器或将表单放入容器中已经使页面无效。
自从我在表单中添加了 div 后，表单验证已停止工作

【解决方案2】：

在<form> 标签内使用 DIV 是完全可以接受的。

如果您查看默认的CSS 2.1 stylesheet，div 和p 都属于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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

将作为

的直接子级是错误的

顺便说一下，/> 可能会在某些文档类型上失败

用http://validator.w3.org/check检查它

此处的文档类型不允许元素“INPUT”；缺少“P”、“H1”、“H2”、“H3”、“H4”、“H5”、“H6”、“PRE”、“DIV”、“ADDRESS”开始标记之一

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

此消息的一个可能原因是您试图将块级元素（例如“

”或“

”）放入内联元素（例如“”、“ " 或 "")。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

定义和用法

标签定义 HTML 文档中的一个部门或一个部分。

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

还有DIV - MDN

HTML 元素（或 HTML 文档划分元素）是流内容的通用容器，它本身并不代表任何东西。它可用于对元素进行分组以进行样式设置目的（使用 class 或 id 属性），或者因为它们共享属性值，例如 lang。只有在没有其他人的情况下才应该使用它语义元素（例如或）是合适的。

你可以在表单中使用 div，如果你在谈论使用 div 代替 table，那么谷歌关于 Tableless 网页设计

【讨论】：

真的吗？ w3schools 参考资料？
@AdonisK.，我知道为什么不应该提及 w3schools，但我认为它不值得一票否决，我会请求你在 Meta 上看到这个讨论：meta.stackexchange.com/questions/120025/…我还从 MDN 更新了 DIV 的参考

【解决方案7】：

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

【讨论】：

【解决方案8】：

我注意到，每当我在 div 中启动表单标记时，随后的 div 兄弟姐妹在我检查（chrome 检查）时将不再是表单的一部分，此后我的表单将永远不会提交。

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

我认为如果我将表单标签放在 DIV 之外它会起作用。表单标签应放置在父 DIV 的开头。如下图所示。

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

【讨论】：

【解决方案9】：

绝对不是！它会渲染，但不会验证。使用标签。

这是不正确的。它不可访问。您会在某些网站上看到它，因为某些开发人员只是懒惰。当我招聘开发人员时，这是我在应聘者工作中检查的第一件事。表格很讨厌，但要花时间学会正确地做表格

【讨论】：

【解决方案10】：

不，不是

<div> 标签总是被滥用来创建网页布局。它的象征性目的是划分页面中的一个部分/部分，以便可以添加或应用单独的样式。 ^{[w3schools Doc]}^[W3C]

这在很大程度上取决于您的 `some` 和 `another` 有什么。

HTML5，有更多逻辑意义的标签，而不是普通的布局标签。 section、header、nav、aside 每件事都有自己的语义含义。并用于对付<div>

【讨论】：

我倾向于同意。在 html 中可以做很多的事情。但是，正是因为这些松散的指导方针，我们才发现自己要从乱七八糟的表格 Web 布局中挖掘出充满黑客的代码。网络能够发展的唯一方法是，如果我们继续遵循提供给我们的新指南。
好吧，我需要网页上的某个区域。用户单击此区域并在表单输入上设置值。什么 HTML 元素适合这种情况？
-1 你完全错了。每个大网站都在表单中使用 div。您在 html 5 示例中给出了与问题无关的示例。给我看一个没有 div 的大网站。本站内的人在不检查的情况下抛出答案并误导其他用户
不构建东西的方法通常是看看企业代码是如何做到的。如果您只使用这些 div 来包含文本，如果文本适用于表单控件，请使用标签。如果没有，请使用 p。语义很重要。可访问性很重要。

不，不是

这在很大程度上取决于您的 some 和 another 有什么。

这在很大程度上取决于您的 `some` 和 `another` 有什么。