在FORM内使用DIV是否正确?

问题描述 投票:85回答:10

我只是想知道您在想FORM标签内的DIV标签吗?

我需要这样的东西:

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

DIV内使用FORM是一般惯例还是我需要其他东西?

html semantic-markup
10个回答
126
投票

完全没问题。

form将仅提交其输入类型控件(*以及TextareaSelect等。

您无需担心div中的form


-8
投票

不,不是


27
投票

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

如果查看默认的CSS 2.1 stylesheet,则divp都在display: block类别中。然后查看form元素的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>

8
投票

您可以在表单中使用<div>-那里没有问题.... BUT如果您打算将<div>用作input的标签,则[... C0]是更好的选择:

label

3
投票

作为

的直接子代是错误的>

而且顺便说一句,/] >>在某些文档类型上可能会失败

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


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

]

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

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

”或“

”)放入内联元素(例如“ ”,“ < span>”或“ ”)。

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

定义和用法

该标记定义了HTML文档中的一个部分或部分。

标签用于对块元素进行分组以将其格式化样式。http://validator.w3.org/check

http://www.w3schools.com/tags/tag_div.asp

HTML元素(或HTML Document Division元素)是流内容的通用容器,它不是固有的代表任何东西。可用于对元素进行样式分组目的(使用class或id属性),或因为它们共享属性值,例如lang。仅当没有其他情况时才应使用语义元素(例如或)是适当的。

您可以在表格内使用div,如果您正在谈论使用div而不是表格,那么google会涉及到Tableless网页设计

正如其他人所说,这一切都很好,您可以做就很好。就我个人而言,我尝试保持一种层次结构的形式,其中我的元素以DIV - MDN为最外面的父元素。我尝试仅在表格内使用divtablepul。只是使我更容易跟踪my

网页中的父母/孩子关系。

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

span

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

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

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

这是不正确的。无法访问。您可以在某些网站上看到它,因为有些开发人员只是懒惰。当我招聘开发人员时,这是我在应聘者工作中首先要检查的内容之一。表单很讨厌,但是要花点时间学习正确的用法

不,不是

<form> <div> <input name='1st input'/> </div> <div> <input name='2nd input'/> </div> <input type='submit'/> </form> 标记始终被滥用来创建Web布局。其象征性目的是在页面中划分一个部分/部分,以便可以向其添加或应用单独的样式。 [<div>

[w3schools Doc]

高度取决于您的[W3C]some的内容。

HTML5,具有更多的逻辑意义标签,而不是普通的布局标签。 anothersectionheadernav都对其具有自己的语义含义。并且用于aside


3
投票

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


3
投票

定义和用法


1
投票

正如其他人所说,这一切都很好,您可以做就很好。就我个人而言,我尝试保持一种层次结构的形式,其中我的元素以DIV - MDN为最外面的父元素。我尝试仅在表格内使用divtablepul。只是使我更容易跟踪my


0
投票

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


-5
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.