<label> 中的 HTML for="" 属性是什么？

What is the HTML for="" attribute in <label>?

提问by Chris G.

I have seen this in jQuery - what does it do?

我在 jQuery 中看到过这个 - 它有什么作用？

<label for="name"> text </label>
<input type="text" name="name" value=""/>

采纳答案by wasmup

To associate the <label>with an <input>element, you need to give the <input>an idattribute. The <label>then needs a forattribute whose valueis the same as the input's id:

要将<label>与<input>元素关联，您需要提供<input>一个id属性。该<label>则需要for其属性value是一样的输入的id：

<label for="username">Click me</label>
<input type="text" id="username">

The forattribute associates a <label>with an <input>element; which offers some major advantages:
1. The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
2. You can click the associated labelto focus/activate the input, as well as the input itself. This increased hit areaprovides an advantage to anyone trying to activate the input, including those using a touch-screen device.

该for属性将 a<label>与<input>元素相关联；这提供了一些主要优点：
1. 标签文本不仅与其对应的文本输入在视觉上相关联；它也以编程方式与之关联。这意味着，例如，当用户专注于表单输入时，屏幕阅读器将读出标签，使辅助技术用户更容易理解应该输入哪些数据。
2. 您可以单击相关标签来聚焦/激活输入以及输入本身。这种增加的命中区域为试图激活输入的任何人（包括使用触摸屏设备的人）提供了优势。

Alternatively, you can nest the <input>directly inside the <label>, in which case the forand idattributes are not needed because the association is implicit:

或者，您可以将<input>直接嵌套在 中<label>，在这种情况下，不需要for和id属性，因为关联是隐式的：

<label>Click me <input type="text"></label>

Notes:
One inputcan be associated with multiple labels.
When a <label>is clicked or tapped and it is associated with a form control, the resulting click event is also raised for the associated control.

注意：
一个input可以与多个标签相关联。
当<label>单击或点击 a 并且它与表单控件关联时，也会为关联的控件引发生成的单击事件。

Accessibility concerns

无障碍问题

Don't place interactive elements such as anchors or buttons inside a label. Doing so, makes it difficult for people to activate the form input associated with the label.

不要在标签内放置交互元素，例如锚点或按钮。这样做会使人们难以激活与标签关联的表单输入。

Headings

标题

Placing heading elements within a <label>interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. If the label's text needs to be adjusted visually, use CSS classes applied to the <label>element instead.
If a form, or a section of a form needs a title, use the <legend>element placed within a <fieldset>.

将标题元素放置在 a 中会<label>干扰多种辅助技术，因为标题通常用作导航辅助工具。如果标签的文本需要在视觉上进行调整，请改用应用于<label>元素的CSS 类。
如果表单或表单的一部分需要标题，请使用<legend>放置在<fieldset>.

Buttons

纽扣

An <input>element with a type="button"declaration and a valid value attribute does not need a label associated with it. Doing so may actually interfere with how assistive technology parses the button input. The same applies for the <button>element.

<input>具有type="button"声明和有效值属性的元素不需要与之关联的标签。这样做实际上可能会干扰辅助技术解析按钮输入的方式。这同样适用于<button>元素。

Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

参考：https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/label

回答by Darin Dimitrov

The forattribute is used in labels. It refers to the id of the element this label is associated with.

该for属性用于标签。它指的是与此标签关联的元素的 id。

For example:

例如：

<label for="username">Username</label>
<input type="text" id="username" name="username" />

Now when the user clicks with the mouse on the usernametext the browser will automatically put the focus in the corresponding inputfield. This also works with other input elements such as <textbox>and <select>.

现在，当用户在username文本上单击鼠标时，浏览器会自动将焦点放在相应的input字段中。这也适用于其他输入元素，例如<textbox>和<select>。

Quote from the specification:

引用规范：

This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.

此属性将正在定义的标签与另一个控件显式关联。当存在时，此属性的值必须与同一文档中其他控件的 id 属性值相同。如果不存在，则定义的标签与元素的内容相关联。

As far as why your question is tagged with jQuery and where did you see it being used in jQuery I cannot answer because you didn't provide much information.

至于为什么你的问题被标记为 jQuery 以及你在哪里看到它在 jQuery 中使用我无法回答，因为你没有提供太多信息。

Maybe it was used in a jQuery selector to find the corresponding input element given a label instance:

也许它被用在 jQuery 选择器中，以在给定标签实例的情况下查找相应的输入元素：

var label = $('label');
label.each(function() {
    // get the corresponding input element of the label:
    var input = $('#' + $(this).attr('for'));
});

回答by most venerable sir

I feel the need to answer this. I had the same confusion.

我觉得有必要回答这个问题。我也有同样的困惑。

<p>Click on one of the text labels to toggle the related control:</p>

<form action="/action_page.php">
  <label for="female">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

I changed the for attribute on the 'male' label to female. Now, if you click 'male' the 'female' radio will get checked.

我将“男性”标签上的 for 属性更改为女性。现在，如果您单击“男性”，则会检查“女性”收音机。

Simple as that.

就那么简单。

回答by PhonicUK

You use it with labels to say that two objects belong together.

您将它与标签一起使用来表示两个对象属于一起。

<input type="checkbox" name="remember" id="rememberbox"/>
<label for="rememberbox">Remember your details?</label>

This also means that clicking on that label will change the value of the checkbox.

这也意味着单击该标签将更改复选框的值。

回答by Andrea Turri

a fast example:

一个快速的例子：

<label for="name">Name:</label>
<input id="name" type="text" />

the for=""tag let focus the input when you click the label as well.

for=""当您单击标签时，标签也可以让输入聚焦。

回答by bipen

The forattribute of the <label>tag should be equal to the id attribute of the related element to bind them together.

标签的for属性<label>应该等于相关元素的 id 属性才能将它们绑定在一起。

回答by rahul

it is used for <label>element

它用于<label>元素

it is used with input type checkbox or redio to select on label click

它与输入类型复选框或重做一起使用以在标签单击时进行选择

working demo

工作演示

回答by Stanley85

FYI - if you are in an typescript environment with e.g.

仅供参考 - 如果您在打字稿环境中，例如

<label for={this.props.inputId}>{this.props.label}</label>

you need to use htmlFor

你需要使用 htmlFor

<label htmlFor={this.props.inputId}>{this.props.label}</label>

回答by simply-put

it is used in <label>text for html

它<label>用于 html 的文本

eg.

例如。

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>

回答by Ta Duy Anh

It's the attribute for <label>tag : http://www.w3schools.com/tags/tag_label.asp

这是<label>标签的属性：http: //www.w3schools.com/tags/tag_label.asp