注册 | 登陆
您的位置:阿里西西 > 前端技术 > HTML基础 > 详细内容

html5中<label>标签的for属性使用方式方法详细分

  稿源:本站整理   2018-09-04   点击:   撤稿纠错
介绍的内容是html5中<label>标签的for属性使用方式方法详细分析。
本站收录这篇文章html5中<label>标签的for属性使用方式方法详细分析,详细解说文章中相关html5 label 标签 for属性 技术与知识,欢迎能给大家一些在这方面的支持和帮助!下面是详细内容:

介绍的内容是html5中<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之间创建关联。

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

<!-- Code 1 -->
<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

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

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

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

示例代码:

<!-- 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>

 

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

  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属性的这个做法,能够提高代码质量。


关于html5中<label>标签的for属性使用方式方法详细分析的内容写到这里就结束啦,您可以收藏本页网址http://www.alixixi.com/web/a/2018090496006.shtml方便下次再访问哦。


更多关于 html5 label 标签 for属性 的文章
相关阅读

相关排行总榜

网页教程

网站运营

特效排行

教你如何使用js+CSS写出类似FLASH动画的网
一款CSS3制作的带尖角的按钮实例代码
目前主流浏览器对于HTML5与CSS3的支持情况
全面剖析前端Ajax技术原理及知识
分享一个HTML5 + JavaScript实现Flash动画
用PHOTOSHOP把美女头画像制作成漂亮的仿手
淘宝网及新浪网等几大官方IP查询API接口地
用Photoshop制作淘宝大促双十一电商促销宣
用HTML5+css3制作HTML5验证的网页表单
通过html5代码实现在网页中插入和播放mp4
如何让您的微信公众号内容快速增加阅读量
网站用户界面设计(网页设计)命名规范
分享一些企业微信营销推广的技巧与经验
可以借鉴和学习的小米模式4大经验要素
SEO优化中网站title标题优化总结及经验分
为什么说建站要从网站用户忠诚度着手,知
一个优秀的SEM进行百度搜索推广账号架构经
谈谈从了解用户开始互联网推广的营销策略
谈谈新手运营网站如何做好网站的广告位投
清理您网站上的黑链的几个招数
JS制作循环上下左右平移转圈的图层特效
原生js写的贪食蛇网页版小游戏特效代码,
用CSS3实现的addidas阿迪达斯标志LOGO特效
HTML5打造的酷炫3D 360度图片立体浏览特效
通用canvas代码实现的JS画圆圈动画特效代
通过HTML5+SVG制作奔跑的小马驹动画特效
jquery实现拖拽进度条并显示百分比的特效
用HTML5+canvas代码绘制的星空月亮图案特
简单实用的纯CSS实现的横向多级导航特效代
原生JS写的一个书架式的图片缩放滚动展示