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

Question

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

经典方式:

<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:标签本身可以位于相关控件之前,之后或周围.

<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

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

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

Answer 4

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

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

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

<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>a <label>.这稍微冗长一点,因为您必须指定id和属性来关联<input>和<label>.

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

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>受限于它可以包含哪些元素.例如,如果不在标签内,则只能在标签文本<div>之间放置.<input><input><label>

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

Answer 8

一个值得注意的'gotcha'规定你不应该在带有明确的"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>

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

就个人而言,我试图避免使用输入子元素的标签元素.对于标签元素而言,在语义上不适合包含比标签本身更多的内容.如果您在标签中嵌套输入以实现某种美感,则应该使用CSS代替.

Answer 9

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

label input {
    vertical-align: bottom;
}

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

Answer 10

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

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