Html 在 FORM 中使用 DIV 是否正确?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9942538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:25:39  来源:igfitidea点击:

Is it correct to use DIV inside FORM?

htmlsemantic-markup

提问by demas

I'm just wondering what are you thinking about DIV-tag inside FORM-tag?

我只是想知道您对 FORM-tag 中的 DIV-tag 有何看法?

I need something like this:

我需要这样的东西:

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

Is it general practice to use DIVinside FORMor I need something different?

DIV在内部使用是一般做法FORM还是我需要不同的东西?

回答by Royi Namir

It is totally fine .

完全没问题。

The formwill submit only its input type controls ( *also Textarea, Select, etc...).

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

You have nothing to worry about a divwithin a form.

您无需担心 adiv内的 a form

回答by Alex W

It is completely acceptable to use a DIV inside a <form>tag.

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

If you look at the default CSS 2.1 stylesheet, divand pare both in the display: blockcategory. Then looking at the HTML 4.01 specification for the form element, they include not only <p>tags, but <table>tags, so of course <div>would meet the same criteria. There is also a <legend>tag inside the form in the documentation.

如果您查看默认的CSS 2.1 样式表div并且p都在display: block类别中。然后查看表单元素的 HTML 4.01 规范,它们不仅包括<p>标签,还包括<table>标签,所以当然<div>会满足相同的标准。<legend>文档中的表单内还有一个标签。

For instance, the following passes HTML4 validation in strict mode:

例如,以下在严格模式下通过 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>

回答by Manse

You can use a <div>within a form - there is no problem there .... BUTif you are going to use the <div>as the label for the inputdont ... labelis a far better option :

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

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

回答by stefan bachert

It is wrong to have <input> as a direct child of a <form>

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

And by the way <input /> may fail on some doctype

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

Check it with http://validator.w3.org/check

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

文档类型不允许在此处使用元素“INPUT”;缺少“P”、“H1”、“H2”、“H3”、“H4”、“H5”、“H6”、“PRE”、“DIV”、“ADDRESS”起始标签之一

<input type="text" />

<input type="text" />

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 "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

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

回答by Clinton

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.

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

回答by Habib

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

定义和用法

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

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

Also DIV - MDN

还有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.

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

You can use div inside form, if you are talking about using div instead of table, then google about Tableless web design

您可以在表单内使用 div,如果您正在谈论使用 div 而不是 table,那么谷歌关于 Tableless 网页设计

回答by JT Smith

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 divbeing the outer most parent element. I try to use only tablepuland spaninside forms. Just makes it easier for me to keep track of parent/children relationships inside mywebpages.

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

回答by Vincent Omondi

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.

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

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

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.

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

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

回答by user2774731

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

这是不正确的。它无法访问。您会在某些网站上看到它,因为有些开发人员只是懒惰。当我招聘开发人员时,这是我在候选人工作中首先检查的事情之一。表格很讨厌,但花点时间学会正确地做它们

回答by Starx

No, its not

不,这不对

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

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

It highly depends on what your someand anotherhas.

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

HTML5, has more logical meaning tags, instead of having plain layout tags. The section, header, nav, asideeverything have their own semantic meaning to it. And are used against <div>

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