关于html中<label>标签的for属性的详细分析


本文摘自PHP中文网,作者不言,侵删。

这篇文章给大家介绍的内容是关于html中<label>标签的for属性的详细分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

在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之间创建关联。

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

1

2

3

4

<!-- Code 1 -->

<label for="indoor">

  <input id="indoor" type="radio" name="indoor-outdoor">Indoor

</label>

499006772-5b6aba4e9b8a8_articlex.png

代码中,label的for属性值与input的id属性值相同。从这段代码中,并不能看出关联在何处。

关于label的for属性的定义如下:

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

示例代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

<!-- Code 2 -->

<form action="/action_page.php">

  <input type="radio" name="gender" id="male" value="male">

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

  <br>

  <input type="radio" name="gender" id="female" value="female">

  <label for="female">Female</label>

  <br>

  <input type="radio" name="gender" id="other" value="other">

  <label for="other">Other</label>

  <br>

  <input type="submit" value="Submit">

</form>

2064555765-5b6aba13d54a3_articlex.png

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

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

  2. label与input在页面上的排列方式不同。通过Chrome的开发者工具不难发现,Code 1 的运行结果,label标签将input标签遮盖,Code 2 的运行结果,label标签与input标签并列。

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

如果,我们将两段代码中label的for属性删除,则之前的第1点和第2点不变,变化的是第3点。Code 1 的运营结果,点击label的内容,照旧能够选中单选按钮。而 Code 2 的则不同,点击label的内容,无法选中单选按钮。

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

相关文章推荐:

html中标签嵌套的问题如何解决

标签的默认行为以及click事件之间的相互影响">父元素<a>标签的默认行为以及click事件之间的相互影响

以上就是关于html中<label>标签的for属性的详细分析的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html超链接的下划线怎么去掉?a标签去下划线的方法都在这里

如何使用Html5 canvas绘制文字

Html5 常用语法一览

h5里js和servlet实现文件上传的实现步骤

Html怎么设置div边距

Html5 canvas的绘制文本自动换行的示例代码

Html code标签怎么用?Html code标签的作用解释

Html font标签怎么设置字体样式?利用css控制文字大小的方法

Html中span怎么使用

Html5怎么实现图片转圈的动画效果

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...