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

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

@Znarkus在对OP的评论中说，

One of the big pros of putting the <input /> inside the <label>, is that you can omit for and id: <label>My text <input /></label> in your example. So much nicer!

Note: In @Znarknus code, another efficiency was included not explicitly stated in the comment. type="text" can also be omitted and input will render a text box by default.

A side by side comparison of keystrokes and bytes[1].

31 keystrokes, 31 bytes

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

58 keystrokes, 58 bytes

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

Otherwise, the snippets are visually equal and they offer the same level of user accessibility. A user can click or tap the label to place the cursor in the text box.

[1] Text files (.txt) created in Notepad on Windows, bytes from Windows File Explorer properties

我非常喜欢将元素包装在我的内部，<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上遇到了这个问题。我不确定现代浏览器是否会遇到这种结构问题。

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

label input {
    vertical-align: bottom;
}

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

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

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

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

一个显着的“陷阱”指示您在一个带有显式“ 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。

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

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

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

我个人喜欢将标签放在外面，就像您的第二个示例一样。这就是为什么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只能包含一个控制元素。

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

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

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

<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中改变了主意，所以我不知道什么是明智的了：

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

UX question that discusses this point in detail: https://ux.stackexchange.com/questions/23552/should-the-space-between-the-checkbox-and-label-be-clickable

我更喜欢

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

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

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

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

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