关于html：我应该将输入元素放在标签元素中吗？

Should I put input elements inside a label element?

是否有关于label和input HTML元素嵌套的最佳实践？

经典方式：

1 2	<label for="myinput">My Text</label> <input type="text" id="myinput" />

要么

1
2
3

相关讨论

将放在中的一个重要优点是，您可以在示例中省略for和id：My text </label>。好多了！
虽然我同意input在语义上不属于label，但我今天注意到Bootstrap的开发人员不同意我的观点。某些元素(如内联复选框)的样式取决于input是在内部还是外部。
顺便说一下，创建是一个非常糟糕的主意，因为我在页面上有多个表单，并且我不能将id属性用于许多小部件，而不会落入unique id per page陷阱。访问窗口小部件的唯一可接受方法是form + widget_name。
@MaxZoom如果您的页面上有这么多不同的表单，但是您的字段名称相同而无法提供唯一的ID，那么您可能需要重新考虑一下您的页面设计，恕我直言;显然我不知道你的情况，但这对我来说闻起来很糟糕
@kenbellows在一个页面上放置两个搜索表单是设计师/企业(不是我的)的想法。最好的用户体验实践可能会随着时间的推移而改变，但HTML应该足够灵活(恕我直言)以涵盖任何可见的场景。
@kenbellows我不认为这是一种代码味道。 ASP.NET MVC的Html帮助程序(Html.EditFor等)能够基于数据模型提出合理的名称/ ID(当然不完美)。除非你为客户端推出类似的内容(例如，淘汰赛)，否则使用部分视图或重复控件将立即解决此问题。如果我有重复的东西，那么如何创建唯一的ID会变得非常具有上下文性，而IMO并没有真正添加任何价值。
一个旁注(关于@Znarkus评论)"标签元素最多可包含一个按钮，输入，密钥，计量，输出，进度，选择或textarea后代。"
@Blazemonger从语义上讲，label作为焦点的控件，因此对于由它们周围的方形区域选择的复选框和单选按钮 - 这是正确的用法。虽然我同意应该只有一个特殊的"控制"元素
第二种方式带来了Jsoup解析问题。我无法在此标签中获取输入值，也不能使用inputElement.val()和labelElement.val()。这里的大问题......
@kenbellows我不同意这是代码味道。在页面中重用表单有许多完全有效的用例。作为一个简单的示例，具有就地编辑的表可以在每行上具有单个表单的实例，并且可能具有多个列。页面各部分内的搜索功能是另一个。
将input保留在label内似乎会导致对齐问题

从w3：标签本身可以位于相关控件之前，之后或周围。

1 2	<label for="lastname">Last Name</label> <input type="text" id="lastname" />

要么

1 2	<input type="text" id="lastname" /> <label for="lastname">Last Name</label>

要么

1
2
3
4

请注意，当表格用于布局时，不能使用第三种技术，其中标签位于一个单元格中，而其关联的表单字段位于另一个单元格中。

任何一个都有效。我喜欢使用第一个或第二个例子，因为它为你提供了更多的样式控制。

相关讨论

如上所述，所有这些都是有效的，但在我自己的实践中，我通常会依据superUntitled为文本框，textareas和选择提供的第一个示例。但是对于单选按钮和复选框，我通常使用第三个示例，我希望在附带的文本之前输入，并且不希望使用与其他标签和字段使用的相同类型的固定宽度和/或浮动。因此，在任何一个给定的表单上，您可能会发现我一起使用这两种格式。
我想知道</label>是否符合他们的标准。
@FelipeAls不难编码？在asp.net中嵌套组件时，它们的id前缀为其所有容器"祖先"的id。所以你不能轻易猜出什么是价值。当然你仍然可以获得这个值，但是这对于标签输入/ /标签构造来说是不必要的复杂
太糟糕了，你不能在输入标签内嵌套标签。在语义上更合理，因为如果从抽象的角度来看，标签确实是输入的属性。
@frenchone ASP.NET Label控件具有AssociatedControlID属性，允许您为标签添加适当的"for"属性。请参阅msdn.microsoft.com/en-us/library/…
@Alex完全同意。如果标签自动添加到输入中，也会很酷，永远让我们摆脱表格中标签的丑陋感。
链接的WCAG文档包括以下选项"控件包含在包含标签文本的标签元素中。"我不知道自@Sorcy评论以来是否添加了这些内容，但是标签输入方案现在被认为是有效的。
哦，显然他们改变了它。万岁为了理智！
第三种选择也不易出错。曾经见过一个有输入的网站，但点击它会以某种方式瞄准不期望的不同输入元素？如果它是一个不在视图中的复选框，可能会很糟糕。
将标签事件处理程序附加到标签时，标签中的输入存在问题，至少在chrome中，处理程序在单击标签时会被触发两次。您可以通过处理程序末尾的return false;来获取，但如果您可能有其他处理程序需要在之后执行，并且停止传播不是一个选项，这就成了一个问题。
将Label包裹在input周围时会出现问题，如果您想根据收音机/复选框的checked状态更改标签的样式，则无法使用纯CSS进行更改。
第一个和最后一个选项的一个限制：它们不允许纯CSS切换开关(例如codepen.io/mallendeo/pen/eLIiG)。为此，您需要输入后面的标签，以便您可以使用相邻的同级选择器来设置切换的开/关状态的样式。
@FelipeAls＆amp;你能不能删除你对＃3不是有效方法的评论？这让事情变得非常混乱;评论中有太多的选票不再是真的。
@superUntitled以最佳方式详细解释。没关系，你放在整个页面上的位置，它应该通过标签'for'属性链接，输入有相同的'ID'。例如，1列上的表有标签，2列有输入框。
@Matt嵌套加id在Firefox v54和IE11以及Chrome 59中不起作用。
需要注意的一点是，输入必须具有"name"属性才能单击标签以对其进行聚焦。
@superUntitled关于第三种方法的另一个注意事项是它在IE6中不起作用。
@Alex：这也可以根据例如样式Label。复选框已选中等。
我对这个答案进行了低估，因为它似乎说OP已经知道了什么：这两种方法都是有效的。问题是关于最佳实践：为什么一个人选择一种方法而不是另一种方法。当然，我确实看到OP将其评选为最佳答案，这对我来说是一个谜。
@RandallStewart OP可能选择了这个最佳，因为它还提供了使用指南，这就是问题所在。在选择时，答案也很少。有些可能现在好些但不是那么好。
@Alex我希望我可以500次推荐你的评论。
@Alex第二个想法，如果你想到一个不同的类比：一张纸上面写着"FREE"，然后你在烤纸边缘放一个烤面包机，因为你想要指出烤面包机是免费的服用。标签也可以是标记的平台/容器。也许内部或外部都有意义。
第三个选项(隐式标签)具有屏幕阅读器的可访问性问题，因为辅助技术无法正确处理它们。
使用…</label>(输入后标签)方法的一个原因是利用所有输入元素上的:invalid伪类将样式应用于标签，例如将其设置为红色或粗体，或者在其旁边添加警告图标(例如input:invalid + label { color: red })。
您可以在标尺中包装标签文本并获得相同的结果：Foo</span></label>和label input:invalid + span

我更喜欢

1
2
3
4
5
6
7
8
9

<label>
Firstname
<input name="firstname" />
</label>

<label>
Lastname
<input name="lastname" />
</label>

过度

1
2
3
4
5

<label for="firstname">Firstname</label>
<input name="firstname" id="firstname" />

<label for="lastname">Lastname</label>
<input name="lastname" id="lastname" />

主要是因为它使HTML更具可读性。我实际上认为我的第一个例子更容易使用CSS，因为CSS与嵌套元素的效果非常好。

但这是我想的味道问题。

如果您需要更多样式选项，请添加span标记。

1
2
3
4
5
6
7
8
9

<label>
<span>Firstname</span>
<input name="firstname" />
</label>

<label>
<span>Lastname</span>
<input name="lastname" />
</label>

在我看来，代码看起来仍然更好。

相关讨论

在标签内包含输入与使用HTML进行布局相同。
我喜欢这个解决方案也适用于这样的情况：Expires after days</label>(标签在输入元素之前和之后)
我认为最后一个例子是 - 除了for和id属性 - 与输入旁边的标签没有任何不同，两者都包含在div，li或者不包含的内容中，是不是！？
@retrovertigo - 功能上？不。它只是减少了标记，减少了术语的过度使用。我们知道输入firstname应该遵循firstname的标签，但浏览器需要声明。这完全取决于您的代码中的味道和您认为最好(并且最容易调试)的内容。我现在更喜欢使用嵌套，虽然我需要一段时间才能习惯它。
不幸的是，这违反了隐式标签的WCAG2.0 AA合规性，但在标签上添加for属性应该再次修复它。
@JamesWestgate你可以提供一个指向它的位置的链接吗？从我所知道的情况来看，隐式标签是完全可以接受的，因为SOME AT不能很好地处理它，而许多其他标签处理得很好。
@MPavlak - 快速浏览一下，我从w3.org找到了这个指导。 w3.org/WAI/tutorials/forms/labels。然后我检查了w3.org/TR/WCAG20-TECHS/H44.html。在底部(它是模糊的)它表示，为了声明一致性，您需要传递测试标准，并明确指出您应该使用for属性。实际上，当我上次在Apple Voiceover(10％市场份额的屏幕阅读器桌面，60％市场份额的屏幕阅读器移动设备)中进行测试时，隐式标签不起作用，因此这是另一个主要因素。希望有所帮助！
@JamesWestgate我认为更大的问题是有很多方法可以通过不涉及使用显式标签的验收标准。由于未能满足接受度，H44并不意味着您不会以其他方式(例如，标题或咏叹调属性)满足可访问性。或者我不正确理解？
@MPavlak - 特别是标题是一个很大的无可访问性。如果你愿意，我可以链接关于它的文章，或只是google它;)只是不要使用它是你最好的选择。如果您可以使用标签，请使用标签。如果存在隐式标签，则添加for属性与添加aria标签将为您提供更好的结果。但是如果你不能添加标签(例如后端问题)，那么回退到使用aria属性。
该解决方案的兴趣在于能够使用CSS伪选择器：焦点在标签上以在关联的输入被聚焦时突出显示它。

如果在label标签中包含输入标签，则无需使用'for'属性。

也就是说，我不喜欢在我的标签中包含输入标签，因为我认为它们是独立的，不包含实体。

相关讨论

行为差异：点击标签和输入之间的空格

如果单击标签和输入之间的空格，则仅当标签包含输入时才激活输入。

这是有道理的，因为在这种情况下，空格只是标签的另一个字符。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<p>
Inside:
</p>

<label>
<input type="checkbox" />
|<----- Label. Click between me and the checkbox.
</label>

<p>
Outside:
</p>

<input type="checkbox" id="check" />
<label for="check">|<----- Label. Click between me and the checkbox.</label>

能够在标签和框之间单击意味着它是：

更容易点击
事情的起点和终点都不太清楚

Bootstrap复选框v3.3示例使用内部输入：http：//getbootstrap.com/css/#forms可能明智地遵循它们。但是他们在v4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios中改变了主意，所以我不知道什么是明智的：

Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our s and s are sibling elements as opposed to an within a . This is slightly more verbose as you must specify id and for attributes to relate the and .

UX问题详细讨论了这一点：https：//ux.stackexchange.com/questions/23552/should-the-space-between-the-checkbox-and-label-be-clickable

相关讨论

就个人而言，我喜欢将标签保留在外面，就像你的第二个例子一样。这就是FOR属性存在的原因。原因是我经常将样式应用于标签，如宽度，以使表单看起来不错(下面的简写)：

1
2
3
4
5
6
7
8
9
10
11

做到这一点，我可以避免表格和我的表格中的所有垃圾。

相关讨论

有关W3的建议，请参见http://www.w3.org/TR/html401/interact/forms.html#h-17.9。

他们说它可以以任何一种方式完成。他们将两个方法描述为显式(使用带有元素id的"for")和隐式(将元素嵌入标签中)：

明确：

The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element.

隐式：

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element.

相关讨论

两者都是正确的，但将输入放在标签内使得在使用CSS进行样式设置时灵活性降低。

首先，限制可以包含哪些元素。例如，如果不在内，则只能在和标签文本之间放置。

其次，虽然有一些变通方法可以使样式化更容易，比如用span填充内部标签文本，但某些样式将继承父元素，这样可以使样式更复杂。

相关讨论

一个值得注意的"陷阱"规定你不应该在元素中包含多个具有明确"for"属性的输入元素，例如：

1
2
3
4
5

<label for="child-input-1">
<input type="radio" id="child-input-1"/>
<span> Associate the following text with the selected radio button: </span>
<input type="text" id="child-input-2"/>
</label>

虽然这对于自定义文本值是单选按钮或复选框的辅助表单功能可能很有吸引力，但标签元素的单击焦点功能会立即将焦点放在其"for"属性中明确定义了id的元素上。，使用户几乎不可能点击包含的文本字段来输入值。

就个人而言，我试图避免使用输入子元素的标签元素。对于标签元素而言，在语义上不适合包含比标签本身更多的内容。如果您为了达到某种美感而在标签中嵌套输入，那么您应该使用CSS代替。

相关讨论

正如大多数人所说的那样，两种方式确实有效，但我认为只有第一种应用。由于语义严格，标签不会"包含"输入。在我看来，标记结构中的包含(父/子)关系应反映视觉输出中的包含。即，应在浏览器中围绕该标记绘制围绕标记中的另一个元素的元素。根据这个，标签应该是输入的兄弟，而不是它的父母。因此，第二个选项是任意的，令人困惑。每个读过Python之禅的人都可能会同意(Flat比嵌套好，Sparse比密集更好，应该有一个 - 最好只有一个 - 明显的方式来做...)。

由于W3C和主要浏览器供应商的决定(允许"你喜欢哪种方式去做"，而不是"以正确的方式去做")是因为今天网络如此混乱，我们的开发人员必须应对纠结以及各种遗留代码。

我通常会选择前两个选项。我已经看到了使用第三个选项的场景，当无线电选择嵌入标签和css包含类似的东西时

1
2
3

label input {
vertical-align: bottom;
}

以确保无线电的正确垂直对齐。

我非常喜欢在中包含元素，因为我不必生成id。

我是一名Javascript开发人员，React或Angular用于生成可供我或其他人重用的组件。然后很容易在页面中复制一个id，导致奇怪的行为。

参考WHATWG(编写表单的用户界面)，将输入字段放在标签内是没有错的。这样可以节省代码，因为不再需要label中的for属性。