HTML标记中的For属性是什么？

  <label id="label1" for="txtTextBox">

what is the impact of label1 if I put the for attribute in there?

如果我把for属性放在那里,label1的影响是什么?

4 个解决方案

#1

It allows you to create a label that is attached to a specific element in the DOM. When the label receives a mouse down event it focuses the element it is attached to.

它允许您创建附加到DOM中特定元素的标签。当标签收到鼠标按下事件时,它会聚焦它所附着的元素。

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

When the user clicks on the "Username:" text it will focus the text box.

当用户单击“用户名:”文本时,它将聚焦文本框。

This is also good for accessibility as screen readers will read the label's inner HTML before reading the input field, regardless of the physical order they appear in the DOM.

这对于可访问性也很有用,因为屏幕阅读器会在读取输入字段之前读取标签的内部HTML,而不管它们在DOM中出现的物理顺序如何。

#2

It refers to the id (not name!) of the form element (input, select, textarea, option, etc.) that it is labelling. The implication of this is that using for allows one to click on the label, and have the related form element focused.

它指的是它标记的表单元素(input,select,textarea,option等)的id(不是name!)。这意味着使用for允许单击标签,并关注相关的表单元素。

#3

According to W3C,

根据W3C,

The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable element in the same Document as the label element.

可以指定for属性以指示与标题相关联的表单控件。如果指定了该属性,则该属性的值必须是与label元素在同一Document中的可标记元素的ID。

If the attribute is specified and there is an element in the Document whose ID is equal to the value of the for attribute, and the first such element is a labelable element, then that element is the label element's labeled control.

如果指定了属性并且Document中有一个元素,其ID等于for属性的值,并且第一个这样的元素是一个可标记的元素,那么该元素就是label元素的标记控件。

https://dev.w3.org/html5/spec-preview/the-label-element.html#attr-label-for

One of its benefits is clicking on label will get attached input element focus,

它的一个好处是点击标签会得到附加的输入元素焦点,

In case of Checkbox OR Radio button, clicking on Label will Check that Checkbox/Radio but it doesn't cover space between label content and checkbox/radio

如果是Checkbox或单选按钮,单击标签将检查复选框/收音机,但它不包括标签内容和复选框/收音机之间的空格

<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>

<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label>

you can achieve same thing by doing like this :

你可以通过这样做来实现同样的目的:

    <label><input type="radio" name="gender" id="male" value="male"> Male </label>
    <label><input type="radio" name="gender" id="female" value="female"> Female</label>

but this practice is arguable, I Prefer second for Checkbox/Radio since it also covers space between label and checkbox/radio.

但这种做法是有争议的,我更喜欢Checkbox / Radio,因为它还涵盖了标签和复选框/收音机之间的空间。

#4

Seems actually HTML5 specs deffines 2 ways of < label > tag usage and all major browsers supports both extending the clickable area to the Label and focusing the Control.

实际上HTML5规范实际上定义了2种标签使用方式,所有主流浏览器都支持将可点击区域扩展到Label并聚焦Control。

a) Control is nested inside the Label

a)控件嵌套在Label中

b) Label is linked to Control with for & id attributes

b)Label与for&id属性链接到Control

<!-- Method a: nested -->
<p>
  <label>
      Username1: 
      <input type="text" id="name_user" name="nameuser" />
  </label>
</p>

<!-- Method b: linked -->
<p>
  <label for="user_name">Username2: </label>
  <input type="text" id="user_name" name="username" />
</p>

The only difference I've found between both methods is that Linking Label to Control (Method b) allows you to separate the Label and the Control in your layout, for example, in 2 different table cells.

我在两种方法之间找到的唯一区别是,将标签链接到控件(方法b)允许您在布局中分离Label和Control,例如,在2个不同的表格单元格中。

#1