我应该将输入元素放在标签元素内吗？

是否存在关于嵌套HTML label和inputHTML元素的最佳实践？

经典方式：

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

要么

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

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

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

要么

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

要么

<label>
   <input type="text" name="lastname" />
   Last Name
</label>

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

任一有效。我喜欢使用第一个或第二个示例，因为它可以为您提供更多的样式控制。

我更喜欢

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

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

过度

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

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

主要是因为它使HTML更具可读性。而且我实际上认为我的第一个示例更易于使用CSS进行样式设置，因为CSS与嵌套元素非常兼容。

但这是我的口味问题。

如果需要更多样式选项，请添加一个span标签。

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

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

我认为代码看起来仍然更好。

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

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

行为差异：在标签和输入之间的空白处单击

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

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

<p>Inside:</p>

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

<p>Outside:</p>

<input type="checkbox" id="check" />
<label for="check">|&lt;----- 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中改变了主意，所以我不知道什么是明智的了：

复选框和单选按钮的使用旨在支持基于HTML的表单验证并提供简洁，可访问的标签。因此，我们的<input>S和<label>s如相对于一个同级元素<input>内的<label>。由于您必须指定id并使属性与<input>和关联，所以这有点冗长<label>。

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

我个人喜欢将标签保留在外面，就像您的第二个示例一样。这就是为什么存在FOR属性的原因。原因是我经常将样式应用到标签上，例如宽度，以使表单看起来不错（下面的简写形式）：

<style>
label {
  width: 120px;
  margin-right: 10px;
}
</style>

<label for="myinput">My Text</label>
<input type="text" id="myinput" /><br />
<label for="myinput2">My Text2</label>
<input type="text" id="myinput2" />

这样可以避免表格和表格中的所有垃圾。

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

他们说这可以通过任何一种方式完成。他们将这两种方法描述为显式的（使用带有元素ID的“ for”）和隐式的（将元素嵌入标签中）：

显式：

for属性将标签与另一个控件明确关联：for属性的值必须与关联控件元素的id属性的值相同。

隐式：

若要将标签与另一个控件隐式关联，则control元素必须位于LABEL元素的内容之内。在这种情况下，LABEL只能包含一个控制元素。

两者都是正确的，但是将输入置于标签内会使使用CSS样式时的灵活性大大降低。

首先，a <label>被限制在其中可以包含的元素中。例如，如果不在标签内，则只能<div>在<input>和文本之间放置一个。<input><label>

其次，虽然有一些变通方法可以使样式更容易，例如用间距将内部标签文本包裹起来，但是某些样式将从父元素继承而来，这会使样式更加复杂。

一个值得注意的“陷阱”指示您在一个带有显式“ for”属性的<label>元素内不应包含多个输入元素，例如：

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

尽管这对于自定义文本值仅次于单选按钮或复选框的表单功能而言很诱人，但label元素的单击焦点功能将立即将焦点移到ID在其“ for”属性中明确定义的元素，几乎使用户无法单击包含的文本字段来输入值。

就个人而言，我尽量避免使用带有输入子元素的标签元素。标签元素在语义上不适合包含比标签本身更多的内容。如果要在标签中嵌套输入以实现某种美感，则应改用CSS。

正如大多数人所说，这两种方法确实有效，但是我认为只有第一种方法应该可行。从语义上讲严格，标签不“包含”输入。我认为，标记结构中的包含（父/子）关系应反映视觉输出中的包含。也就是说，标记中围绕另一个元素的元素应在浏览器中围绕该元素绘制。因此，标签应该是输入的同级，而不是父级。因此，第二个选项是任意的并且令人困惑。每个阅读过Python Zen的人都可能会同意（扁平比嵌套更好，稀疏比密集更好，应该有一种-最好只有一种-显而易见的方式...）。

由于W3C和主要浏览器供应商的此类决定（允许“以您喜欢的方式”，而不是“以正确的方式”），今天的网络是如此混乱，我们开发人员必须应对以及各种各样的旧代码。

我通常会选择前两个选项。我已经看到了使用第三个选项时的情况，当嵌入标签和CSS的单选选项包含类似

label input {
    vertical-align: bottom;
}

为了确保收音机的正确垂直对齐。

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

我非常喜欢将元素包装在我的内部，<label>因为我不必生成ID。

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

您需要考虑的一件事是复选框和无线电输入与javascript的交互。

使用以下结构：

<label>
  <input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
  <span>Label text</span>
</label>

当用户单击“标签文本”时，将触发一次controlCheckbox（）函数。

但是，当单击输入标记时，在某些较旧的浏览器中，可能会触发controlCheckbox（）函数两次。这是因为输入和标签标签都触发附加到复选框的onclick事件。

然后，您的checkboxState中可能会有一些错误。

我最近在IE11上遇到了这个问题。我不确定现代浏览器是否会遇到这种结构问题。

放置input在内部的主要优点label是对人类的打字效率和对计算机的字节存储。

@Znarkus在对OP的评论中说，

将<input />放进的最大优点之一<label>是，您可以在示例中省略for和id：<label>My text <input /></label>。好多了！

注意：在@Znarknus代码中，未包含在注释中未明确说明的另一种效率。type="text"也可以省略，input默认情况下将呈现文本框。

击键和字节[1]的并排比较。

31次击键，31个字节

<label>My Text<input /></label>

58次击键，58个字节

<label for="myinput">My Text</label><input id="myinput" />

否则，这些片段在视觉上是相等的，并且它们提供相同级别的用户可访问性。用户可以单击或点击标签以将光标放置在文本框中。

[1]在Windows的记事本中创建的文本文件（.txt），Windows File Explorer属性中的字节