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

我在 jQuery 中看到过这种情况——它是做什么的？

<label for="name"> text </label>
<input type="text" name="name" value=""/>
132830 次浏览
小开

它被用在 HTML 的 <label>文本中

例如。

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


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

for属性用于标签，它指的是与这个标签相关联的元素的 id。

例如:

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

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

引自 规格:

此属性显式地将定义的标签与 当存在时，此属性的值必须是 控件中的其他控件的 id 属性的值相同 当缺少时，正在定义的标签与 the element's contents.

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

也许在 jQuery 选择器中使用它来查找给定 label 实例的相应输入元素:

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

用于 <label>元素

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

工作演示

小开

一个很快的例子:

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

当你点击标签的时候，for=""标签可以让输入集中。

小开

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

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

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

小开

它是 <label>标记的属性: http://www.w3schools.com/tags/tag_label.asp

小开

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

小开

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

<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 属性更改为“女性”。现在，如果你点击“男性”，“女性”收音机将被检查。

就这么简单。

小开

仅供参考-如果你在一个打字环境中，例如。

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

你需要使用 htmlFor

<label htmlFor={this.props.inputId}>{this.props.label}</label>
小开
最佳答案

要将 <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 类。
如果表单或表单的某个部分需要标题，请使用放置在 <fieldset>中的 <legend>元素。

纽扣

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

参考: Https://developer.mozilla.org/en-us/docs/web/html/element/label

小开

它将标签与输入元素相关联。HTML 标签是为了向不同类别的用户传达特殊的含义。下面是标签的意义:

  1. 对于有运动障碍的人(也适用于一般鼠标用户) : 正确使用的标签标签可以点击访问相关的表单控件。艾格。用户可以单击更容易单击的标签并切换复选框，而不必特别单击该复选框。
  2. For visually-challenged users: Visually challenged users use screen-readers that reads the associated label tag whenever a form control is focused. It helps users to know the label which was otherwise invisible to them.

更多关于标签-> https://www.w3.org/TR/WCAG20-TECHS/H44.html


提交答案