资讯专栏INFORMATION COLUMN

关于<label>的for属性的简单探索

tuomao / 3357人阅读

摘要:同时,给出一段示例代码,如下代码中,的属性值与的属性值相同。在上,关于的属性的定义如下译文属性指定与表单中的哪个元素进行绑定。的和,属于包含关系,的和相对独立。为添加属性的这个做法,能够提高代码质量。

在freecodecamp上HTML教程的Create a Set of Radio Buttons这一节中,看到这样一段话,

It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element.

大概的意思是:最好的做法,是给label标签,添加for属性,其值与input标签的id属性的值相同,以在label和input之间创建关联。

同时,给出一段示例代码,如下:


代码中,labelfor属性值与inputid属性值相同。从这段代码中,并不能看出关联在何处。即使将for属性删除,运行结果也没有差别。

在w3schools上,关于label的for属性的定义如下:

The for attribute specifies which form element a label is bound to.
译文:for属性指定label与表单中的哪个元素进行绑定。

示例代码:





根据w3schools提供的定义和示例代码,可以看出for属性和id属性相同的话,label和input是一一对应的关系。

对比两段代码,不难发现,

label与input标签的包含关系不同。Code 1 的label和input,属于包含关系,Code 2 的label和input相对独立。

label与input在页面上的排列方式不同。通过Chrome的开发者工具(快捷键Ctrl + Shift + i)不难发现,Code 1 的运行结果,label标签将input标签包含,Code 2 的运行结果,label标签与input标签并列。

label与input一一对应。点击label的内容,对应的单选按钮都会被选中。

如果,我们将两段代码中label的for属性删除,上述的第1点和第2点依然成立,变化的是第3点。
Code 1 的运行结果,点击label的文字内容,依旧能够选中单选按钮。因为input包含在label中。而 Code 2 的则不同,点击label的内容,无法选中单选按钮。

经过简单的代码运行结果对比,我们能够验证文章开头引用的那段话是正确的。为label添加for属性的这个做法,能够提高代码质量。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52837.html

相关文章

  • 关于&lt;label&gt;for属性简单探索

    摘要:同时,给出一段示例代码,如下代码中,的属性值与的属性值相同。在上,关于的属性的定义如下译文属性指定与表单中的哪个元素进行绑定。的和,属于包含关系,的和相对独立。为添加属性的这个做法,能够提高代码质量。 在freecodecamp上HTML教程的Create a Set of Radio Buttons这一节中,看到这样一段话, It is considered best practic...

    sarva 评论0 收藏0
  • Python pyecharts如何绘制饼状图呢?下面给大家解答

      小编写这篇文章的一个主要目的,继续为大家介绍关于Python相关事宜,介绍的内容主要是教我们如何去绘制饼状图,具体怎么去做呢?下面就给大家详细的解答下。  概念  饼图(pie chart)是用圆形及圆内扇形的角度来表示数值大小的图形,它主要用于表示一个样本(或总体)中各组成部分的数据占全部数据的比例。仅排列在工作表的一列或一行中的数据可以绘制到饼图中。饼图显示一个数据系列(数据系列:在图表中...

    89542767 评论0 收藏0
  • pythonmatplotlib绘图时纵坐标重合显示不全和图片保存时不完美问题改进

      近期工作中过程中遇到了matplotlib保存图片纵坐标不完美的难题,因此本文关键为大家介绍了关于pythonmatplotlib绘图时纵坐标重合显示不全和图片保存的时候不完善解决问题的方法方式,需要的小伙伴可以做个参考  难题  在使用matplotlib做图时,有时候会碰到绘图时纵坐标重合,显示不全和图片保存时不完美的难题。如下所示:  解决方案  画图时重叠或者显示不全的问题  画图时加...

    89542767 评论0 收藏0
  • Python计算AUC三种方式

      对于很多从事Python的人来说,有很多的人想要去进阶的,比如学习跟多的一些知识,比如,我们在工作中会遇到,使用Python计算AUC的三种方式,下面给大家做出一个解答。  介绍  AUC(Area Under Curve),其实就是ROC曲线围成的和下坐标轴围成的一个面积,这个面积的数值一般是不会大于1的。  当然,ROC曲线基本上都在y=x,这条直线上面的一个正上方,因此AUC的正确值应该...

    89542767 评论0 收藏0
  • 如何使用Python Opencv中ann神经网络识别手写数字功能

      写这篇文章的主要目的,是关于Python Opencv的相关知识,包括ann神经网络识别手写数字功能,教给大家怎么去使用这种功能,接下来请大家仔细的进行阅读哦。  opencv会给大家提供一种神经网络的功能,即为ann,这种神经的网络功能与Keras的很接近。  关于mnist数据怎么去进行解析,读者人员可以自己从网上downland软件,用python自己编写解析代码,由于这里主要研究knn...

    89542767 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<