Question

我在jQuery中看到了这个 - 它做了什么？

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

Answer 1

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

例如：

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

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

来自specification：

的引用

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

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

可能在jQuery选择器中使用它来查找给定标签实例的相应输入元素：

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

Answer 2

要将<label>与<input>元素相关联，您需要给<input>一个id属性。 <label>然后需要一个for与输入的value相同的id属性：

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

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

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

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

注意：
一个input可以与多个标签关联。
当单击<label>并将其与表单控件关联时，也会为关联的控件引发点击事件。

可访问性问题

请勿在标签内放置诸如锚点或按钮之类的交互式元素。这样做会使人们很难激活与标签关联的表单输入。

标题

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

按钮

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

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

Answer 3

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

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

这也意味着点击该标签会改变复选框的值。

Answer 4

一个快速的例子：

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

for=""标记也让您在点击标签时对焦输入。

Answer 5

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

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

我将男性标签的for属性更改为女性。现在，如果你点击“男性”，女性收音机将被检查。

这很简单。

Answer 6

它用于<label>元素

它与输入类型复选框或redio一起用于在标签上单击选择

working demo

Answer 7

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

Answer 8

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

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

您需要使用htmlFor

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

Answer 9

它将标签与输入元素相关联。 HTML标签旨在向各种类别的用户传达特殊含义。标签的含义是：

对于行动不便的人（也适用于普通鼠标用户）：可以单击正确使用的标签来访问相关的表单控件。例如。用户可以单击更容易单击的标签并切换复选框，而不必特别单击复选框。
对于有视觉障碍的用户：有视觉障碍的用户使用屏幕阅读器，该阅读器会在关注表单控件时读取关联的标签标签。它可以帮助用户了解他们否则看不见的标签。

有关标签的更多信息-> https://www.w3.org/TR/WCAG20-TECHS/H44.html

Answer 10

在<label>文本中用于html

例如

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

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

Answer 11

它是<label>代码的属性：http://www.w3schools.com/tags/tag_label.asp

<label>？</label>中的HTML for =“”属性是什么？

11 个答案:

可访问性问题

标题

按钮