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

Should I put input elements inside a label element?

提问by jpsimard-nyx

Is there a best practice concerning the nesting of labeland inputHTML elements?

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

classic way:

经典方式：

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

or

或者

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

采纳答案by superUntitled

From w3:The label itself may be positioned before, after or around the associated control.

来自 w3：标签本身可能位于相关控件之前、之后或周围。

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

or

或者

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

or

或者

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

Note that the third technique cannot be used when a table is being used for layout, with the label in one cell and its associated form field in another cell.

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

Either one is valid. I like to use either the first or second example, as it gives you more style control.

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

回答by Znarkus

I prefer

我更喜欢

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

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

over

超过

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

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

Mainly because it makes the HTML more readable. And I actually think my first example is easier to style with CSS, as CSS works very well with nested elements.

主要是因为它使 HTML 更具可读性。而且我实际上认为我的第一个示例使用 CSS 更容易设置样式，因为 CSS 与嵌套元素配合得很好。

But it's a matter of taste I suppose.

但我想这是一个品味问题。

---

---

If you need more styling options, add a span tag.

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

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

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

Code still looks better in my opinion.

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

回答by Terry

If you include the input tag in the label tag, you don't need to use the 'for' attribute.

如果在 label 标签中包含 input 标签，则不需要使用 'for' 属性。

That said, I don't like to include the input tag in my labels because I think they're separate, not containing, entities.

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

回答by Parrots

Personally I like to keep the label outside, like in your second example. That's why the FOR attribute is there. The reason being I'll often apply styles to the label, like a width, to get the form to look nice (shorthand below):

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

Makes it so I can avoid tables and all that junk in my forms.

使我可以避免表格中的表格和所有垃圾。

回答by user470514

See http://www.w3.org/TR/html401/interact/forms.html#h-17.9for the W3 recommendations.

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

They say it can be done either way. They describe the two methods as explicit (using "for" with the element's id) and implicit (embedding the element in the label):

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

Explicit:

显式：

The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element.

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

Implicit:

隐含：

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element.

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

回答by nicholaides

Both are correct, but putting the input inside the label makes it much less flexible when styling with CSS.

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

First, a <label>is restricted in which elements it can contain. For example, you can only put a <div>between the <input>and the label text, if the <input>is not inside the <label>.

首先，限制a<label>可以包含哪些元素。例如，您只能<div>在<input>和标签文本之间放置，如果<input>不在 内<label>。

Second, while there are workarounds to make styling easier like wrapping the inner label text with a span, some styles will be in inherited from parent elements, which can make styling more complicated.

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

回答by Aaron

A notable 'gotcha' dictates that you should never include more than one input element inside of a <label> element with an explicit "for" attribute, e.g:

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

While this may be tempting for form features in which a custom text value is secondary to a radio button or checkbox, the click-focus functionality of the label element will immediately throw focus to the element whose id is explicitly defined in its 'for' attribute, making it nearly impossible for the user to click into the contained text field to enter a value.

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

Personally, I try to avoid label elements with input children. It seems semantically improper for a label element to encompass more than the label itself. If you're nesting inputs in labels in order to achieve a certain aesthetic, you should be using CSS instead.

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

回答by slashCoder

As most people have said, both ways work indeed, but I think only the first one should. Being semantically strict, the label does not "contain" the input. In my opinion, containment (parent/child) relationship in the markup structureshould reflect containment in the visual output. i.e., an element surrounding another one in the markupshould be drawn around that one in the browser. According to this, the label should be the input's sibling, not it's parent. So option number two is arbitrary and confusing. Everyone that has read the Zen of Pythonwill probably agree (Flat is better than nested, Sparse is better than dense, There should be one-- and preferably only one --obvious way to do it...).

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

Because of decisions like that from W3C and major browser vendors (allowing "whichever way you prefer to do it", instead of "do it the right way") is that the web is so messed up today and we developers have to deal with tangled and so diverse legacy code.

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

回答by Victor Ionescu

I usually go with the first two options. I've seen a scenario when the third option was used, when radio choices where embedded in labels and the css contained something like

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

label input {
    vertical-align: bottom;
}

in order to ensure proper vertical alignment for the radios.

以确保无线电正确垂直对齐。

回答by Benny Neugebauer

Referring to the WHATWG(Writing a form's user interface) it is not wrong to put the input field inside the label. This saves you code because the forattribute from the labelis no longer needed.

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