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

来自 W3 的 HTML4 specification：

标签本身可以位于相关控件之前、之后或周围。

姓

或者

姓

或者

姓氏

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

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

---

我更喜欢

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

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

---

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

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

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

div {边框：1px纯黑色； } 标签 { 边框：1px 纯黑色；填充：5px； } 输入 { 边距右：30px; }

内部：

标签。在我和复选框之间单击。

外部：

标签。在我和复选框之间单击。

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

更容易点击

不太清楚事情的开始和结束

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

复选框和收音机的使用旨在支持基于 HTML 的表单验证并提供简洁、可访问的标签。因此，我们的 和 是兄弟元素，而不是 中的 。这稍微有点冗长，因为您必须指定 id 和属性来关联 和 。

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

---

如果在标签标签中包含输入标签，则不需要使用“for”属性。

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

---

就我个人而言，我喜欢把标签放在外面，就像你的第二个例子一样。这就是 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 属性的值相同。

隐式：

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

---

两者都是正确的，但是将输入放在标签内会使其在使用 CSS 进行样式设置时变得不那么灵活。

首先，a <label> is restricted in which elements it can contain。例如，如果 <input> 不在 <label> 内，您只能在 <input> 和标签文本之间放置 <div>。

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

第三方编辑

根据我的理解，html 5.2 spec for label 表明标签 Content model 是 Phrasing content。这意味着只有其内容模型是短语内容 <label> are allowed inside </label> 的标签。

内容模型 对必须作为元素的子元素和后代元素包含的内容的规范性描述。大多数被归类为短语内容的元素只能包含本身被归类为短语内容的元素，而不是任何流内容。

---

一个值得注意的 'gotcha' 规定，您永远不应在具有显式“for”属性的 元素内包含多个输入元素，例如：

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

虽然这对于自定义文本值次于单选按钮或复选框的表单功能可能很诱人，但标签元素的单击焦点功能将立即将焦点转移到其 id 在其“for”属性中明确定义的元素，使用户几乎不可能单击包含的文本字段来输入值。

就个人而言，我尽量避免带有输入子项的标签元素。一个标签元素包含的不仅仅是标签本身，这在语义上似乎是不合适的。如果您将输入嵌套在标签中以实现某种美感，则应该改用 CSS。

---

正如大多数人所说，两种方式确实有效，但我认为只有第一种应该。由于语义严格，标签不“包含”输入。在我看来，标记结构中的包含（父/子）关系应该反映视觉输出中的包含。即，标记中中另一个元素周围的元素应该在浏览器中周围绘制。据此，标签应该是输入的兄弟，而不是父。因此，选项二是任意且令人困惑的。读过 Zen of Python 的每个人都可能会同意（扁平优于嵌套，稀疏优于密集，应该有一种——最好只有一种——明显的方法......）。

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

---

我通常选择前两个选项。我已经看到了使用第三个选项时的场景，当嵌入在标签中的单选选项和 css 包含类似

label input {
    vertical-align: bottom;
}

以确保对讲机的正确垂直对齐。

---

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

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

---

参考 WHATWG (Writing a form's user interface) 将输入字段放在标签内并没有错。这可以节省您的代码，因为不再需要 label 中的 for 属性。

---

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

使用以下结构：

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

当用户点击“标签文本”时，controlCheckbox() 函数将被触发一次。

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

那么你的 checkboxState 中可能会有一些错误。

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

---

将输入嵌套到标签有几个优点，尤其是单选/复选框字段，

.unchecked, .checked{display:none;} label input:not(:checked) ~ .unchecked{display:inline;} label input:checked ~ .checked{display:inline;} 未选中 已选中

从演示中可以看出，首先嵌套输入字段，然后是其他元素允许，

要单击以激活字段的文本

输入字段后面的元素根据字段的状态动态设置样式。

此外，HTML std 允许 multiple labels 与输入字段相关联，但这会混淆屏幕阅读器，解决此问题的一种方法是将输入字段和其他元素嵌套在单个标签元素中。

---