在FORM中使用DIV是否正确?


86

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

我需要这样的东西:

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

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

Answers:


133

很好。

form会只提交其输入型对照(*还TextareaSelect等...)。

您不必担心div内的form


2
如何在div中使用表单?
Kick Buttowski

1
@KickButtowski div内的表单完全没有问题。您可以在HTML验证程序中自己尝试。此外,由于现代页面是基于div的,因此这几天几乎是不可避免的。如果不允许这样做,那么简单的包装或将表单放在容器中将使页面无效。
Nrzonline

自从我在表单中添加div以来,表单验证就不再为我工作
Suhas '18

28

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

如果您查看默认的CSS 2.1样式表div并且p它们都在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>

11

您可以<div>在表格内使用-那里没有问题....但是,如果您要使用<div>用作inputdont的标签...label是更好的选择:

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

3

将<input>作为<form>的直接子代是错误的

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

使用http://validator.w3.org/check进行检查


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

<input type =“ text” />

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

出现此消息的可能原因是,您试图将一个块级元素(例如“ <p>”或“ <table>”)放入一个内联元素(例如“ <a>”,“ <span> ”或“ <font>”)。


3

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


3

定义和用法

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

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

也是DIV-MDN

HTML元素(或HTML Document Division Element)是流内容的通用容器,它本质上不代表任何内容。它可以用于对元素进行分组以进行样式设置(使用class或id属性),或者因为它们共享属性值(例如lang)。仅当没有其他语义元素(例如或)合适时才应使用它。

您可以在表格中使用div,如果您正在谈论使用div而不是表格,那么Google会介绍Tableless网站设计


3
真?w3schools参考?
Adonis K. Kakoulidis

2
@AdonisK。,我知道为什么不应该包含对w3schools的引用,但我认为这不值得一票,我请您在Meta上查看此讨论:meta.stackexchange.com/questions/120025/…从MDN DIV的同时我已经更新参考
哈比

1

正如其他人所说,这一切都很好,您可以做就很好。就我个人而言,我尝试使用一种元素div作为外部父元素来保持一种层次结构形式。我只尝试使用table p ulspan内部形式。只是让我更容易跟踪父/孩子的关系里面我的网页。


0

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

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

-5

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

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


-8

不,这不对

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

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

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


1
我倾向于同意。有很多事情你可以在HTML里面做。但是由于这些宽松的指导方针,所以我们发现自己发现了使用充满hack的代码的混乱的网页布局。网络发展的唯一途径是,如果我们继续遵循向我们展示的新准则。
JT Smith

好吧,我需要网页上的某个区域。用户单击此区域并在表单输入上设置值。什么HTML元素适合这种情况?
demas 2012年

1
@demas,<select>如果给出选择(如果不是,<a>或者<buttons>很好),则使用defination非常合适。
Starx 2012年

27
-1你完全错了。每个大网站在表格内使用div。您在html 5中给出了与问题无关的示例。告诉我一个大网站,表单中没有div。此网站上的用户无需检查即可提供答案并误导其他用户
Royi Namir 2012年

4
通常,不构建内容的方法是查看企业代码是如何做到的。如果仅使用这些div包含文本,则该文本适用于表单控件,请使用标签。如果不是,请使用p。语义很重要。可访问性很重要。
艾伯特2012年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.