博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML <label>标签</label>中的“ for”属性有什么作用<label>?</label>
阅读量:2289 次
发布时间:2019-05-09

本文共 2921 字,大约阅读时间需要 9 分钟。

本文翻译自:

I wonder what is the difference between the following two code snippets: 我想知道以下两个代码段之间的区别是什么:

and

I'm sure it does something when you use a special JavaScript library, but apart from that, does it validate the HTML or required for some other reason? 我确定当您使用特殊的JavaScript库时,它会执行某些操作,但是除此之外,它是否可以验证HTML或由于其他原因而需要?


#1楼

参考:


#2楼

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


#3楼

The <label> tag allows you to click on the label, and it will be treated like clicking on the associated input element. <label>标记允许您单击标签,将其视为与单击关联的输入元素一样。 There are two ways to create this association: 有两种创建此关联的方法:

One way is to wrap the label element around the input element: 一种方法是将label元素包装在input元素周围:

The other way is to use the for attribute, giving it the ID of the associated input: 另一种方法是使用for属性,为其提供关联输入的ID:

This is especially useful for use with checkboxes and buttons, since it means you can check the box by clicking on the associated text instead of having to hit the box itself. 这对于与复选框和按钮一起使用特别有用,因为这意味着您可以通过单击关联的文本来选中该框,而不必自己点击该框。

Read more about this element in . 在阅读有关此元素的更多信息。


#4楼

The for attribute associates the label with a control element, as defined in the description of in the HTML 4.01 spec. for属性将标签与控件元素相关联,如HTML 4.01规范的说明中所定义。 This implies, among other things, that when the label element receives focus (eg by being clicked on), it passes the focus on to its associated control. 这尤其意味着,当label元素获得焦点(例如,通过单击)时,它将焦点传递给与其关联的控件。 The association between a label and a control may also be used by speech-based user agents, which may give the user a way to ask what the associated label is, when dealing with a control. 标签和控件之间的关联也可以由基于语音的用户代理使用,当处理控件时,基于语音的用户代理可以为用户提供一种询问相关标签是什么的方式。 (The association may not be as obvious as in visual rendering.) (这种关联可能不像视觉渲染那样明显。)

In the first example in the question (without the for ), the use of label markup has no logical or functional implication – it's useless, unless you do something with it in CSS or JavaScript. 在问题的第一个示例中(不带for ), label标记的使用没有逻辑或功能上的含义–它无用,除非您在CSS或JavaScript中对其进行了处理。

HTML specifications do not make it mandatory to associate labels with controls, but Web Content Accessibility Guidelines (WCAG) 2.0 do. HTML规范没有强制性要求将标签与控件关联,但是Web内容可访问性指南(WCAG)2.0确实如此。 This is described in the technical document , which also explains that the implicit association (by nesting eg input inside label ) is not as widely supported as the explicit association via for and id attributes, 技术文档对此进行了描述 ,该文档还解释了隐式关联(通过嵌套,例如在label内部input )不如forid属性的显式关联得到广泛支持,


#5楼

In a nutshell what it does is refer to the id of the input, that's all: 简而言之,它是指输入的id ,仅此而已:


#6楼

The for attribute shows that this label stands for related input field, or check box or radio button or any other data entering field associated with it. for属性显示此标签代表相关的输入字段,复选框或单选按钮或与其关联的任何其他数据输入字段。 for example 例如

  •  
  • 转载地址:http://pzjnb.baihongyu.com/

    你可能感兴趣的文章
    KVM和Qemu的区别
    查看>>
    KVM
    查看>>
    NoSQL分类
    查看>>
    MongoDB安装
    查看>>
    MongoDB基础操作
    查看>>
    MongoDB用户权限管理
    查看>>
    Zabbix 安装配置
    查看>>
    zabbix自定义监控项
    查看>>
    zabbix报警功能(邮件报警)---触发器/动作
    查看>>
    zabbix微信报警
    查看>>
    微信报警脚本
    查看>>
    MySQL中mysqld服务器进程结构
    查看>>
    MySLQ存储结构 innodb 段 区 页
    查看>>
    踢掉一个远程登录用户
    查看>>
    MySQL group by的sql_mode报错
    查看>>
    联合索引应用细节
    查看>>
    Nginx地址重定向 return rewrite if
    查看>>
    PHP安装Redis模块
    查看>>
    PHP追加安装时候忘装的模块
    查看>>
    PHP平滑升级
    查看>>