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

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

从规范中引用:

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

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

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

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

无障碍问题

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

标题

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

纽扣

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

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

Answer 3

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

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

一个快速的例子：

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

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

Answer 5

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

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

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