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

Question

有没有关于嵌套label 和input HTML 元素的最佳做法？

经典方式：

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

或

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

Answer 1

来自 W3 的HTML4 specification：

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

---

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

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

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

Answer 2

我更喜欢

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

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

Answer 3

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

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

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

div {
  border: 1px solid black;
}
label {
  border: 1px solid black;
  padding: 5px;
}
input {
  margin-right: 30px;
}

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

能够在label和box之间点击表示是：

• 更容易点击
• 不太清楚事情的开始和结束

Bootstrap checkbox 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 是兄弟元素，而不是<label> 中的<input>。这稍微有点冗长，因为您必须指定 id 和属性来关联 <input> 和 <label>。

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

Answer 4

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

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

Answer 5

我个人喜欢把标签放在外面，就像你的第二个例子一样。这就是 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" />

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

Answer 6

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

他们说这两种方法都可以。他们将这两种方法描述为显式（使用带有元素 id 的“for”）和隐式（将元素嵌入标签中）：

显式：

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

隐式：

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

Answer 7

两者都是正确的，但是将输入放在标签中会使其在使用 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> 的标签。

内容模型 对必须包含哪些内容的规范性描述 作为元素的子元素和后代。

大多数被归类为短语内容的元素只能 包含本身被归类为短语内容的元素， 没有任何流内容。

Answer 8

一个值得注意的“陷阱”规定，您永远不应在具有显式“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。

Answer 9

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

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

Answer 10

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

label input {
    vertical-align: bottom;
}

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

Answer 11

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

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

Answer 12

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

Answer 13

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

使用以下结构：

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

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

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

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

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

Answer 14

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

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

<label>
  <input type="checkbox" value="something" name="my_checkbox"/>
  <span class="unchecked">Not Checked</span>
  <span class="checked">Is Checked</span>
</label>

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

• 要单击以激活字段的文本
• 输入字段后面的元素将根据字段状态动态设置样式。

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