一、使用介绍

<label>专为input元素服务,为其定义标记。

for属性规定label与哪个表单元素绑定

label和表单控件绑定方式又两种:

1、将表单控件作为label的内容,这样就是隐士绑定。

此时不需要for属性,绑定的控件也不需要id属性。

隐式绑定:
<label>Date of Birth: <input type="text" name="DofB" /></label>

2、为<label>标签下的for属性命名一个目标表单的id,这就是显示绑定。

显式绑定:
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

二、为什么要给<label>加上for属性

给<label>加了for属性绑定了input控件后,可以提高鼠标用户的用户体验。

如果在label元素内点击文本,就会触发此控件。就是说,当用户渲染该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

博客园团队: 抱歉!又拍云又出故障了,现在无法上传图片。09:35

哎,昨天晚上就不能上传了,所以图片就不传了。

博客园团队:由于又拍云再次故障,正在将图片上传切换回我们的服务器 2015-06-02 10:10

效率还挺高的。

html5给<label>新增了一个form属性来规定label所属的一个或多个表单,多个表单用空格分隔。还没真正用过,用到补充。

label的for属性的更多相关文章

  1. WinForms中的Label的AutoSize属性

    当大量使用UserControl组合UI时,如果更改了Label的Text属性,Label.AutoSize属性会影响UserControl的OnLoad事件的发生顺序; public overrid ...

  2. label标签的属性

    //label标签的属性 - (void)viewDidLoad { //初始化一个label1标签对象,初始化有很多方法,最原始的就是init,此处用带有frame的方法 UILabel *labe ...

  3. label 的for属性总结

    一.使用介绍 1. 定义:for属性规定label与哪个表单元素绑定. <label>是专门为<input>元素服务的,为其定义标记. label 和表单控件绑定方式有两种: ...

  4. 用图片作为label,for属性IE下不起作用

    IE浏览器存在一个BUG,当你使用label的for属性达到点击label使对应的表单元素聚焦,label中的内容为图片时,IE浏览器下不起作用. 例如: <input type="c ...

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

    在freecodecamp上HTML教程的Create a Set of Radio Buttons这一节中,看到这样一段话, It is considered best practice to se ...

  6. label 的autosize属性

    label 的autosize属性,显示不全的问题.

  7. <label>标签for属性的妙用

    在用户注册的时候,常常用户点击文字就需要将光标聚焦到对应的表单上面,这个是怎么实现的呢?就是下面我要介绍的<label>标签的for属性 定义:for 属性规定 label 与哪个表单元素 ...

  8. html中label及加上属性for之后的用法

    定义和用法 <label> 标签为 input 元素定义标签(label). label 元素不会向用户呈现任何特殊的样式.不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元 ...

  9. <label>标签for属性

    label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控 ...

随机推荐

  1. web iis服务器安全性配置实例

    自己不维护服务器,不知道维护服务器的辛苦.刚开始为了嫌麻烦,抱有侥幸心理,一些繁琐的安全设置没有配置,结果服务器连一天都没撑过去.经过10天的反复摸索和努力,现在服务器已经稳定工作一个月了,特此整理本 ...

  2. Lua-面向对象中函数使用时冒号(:)和点(.)的区别

    先来看一段简单的代码: local Animal = {} function Animal:Eat( food ) print("Animal:Eat", self, food) ...

  3. Node.js+Express配置入门

    Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V8引 擎执行Javascript的速度非常快,性能非常好.Node.js对一些特殊用 ...

  4. JavaScriptOO.com – 快速找到你需要的 JS 框架

    JavaScriptOO.com 集合了目前 Web 开发中最常用的422(截至目前)款 JavaScript 框架,你可以根据功能类别(Ajax,动画,图表,游戏等)进行过滤和排序,快速找到你需要的 ...

  5. [DeviceOne开发]-轮播图和多模板的简单示例

    一.简介 这个例子是利用Slideview组件实现循环轮播的效果,同时这个slideview作为一个listview的最上面的一行数, 1. listview有2个模板,一个是以slideview为核 ...

  6. 转载:HBASE配置说明

    HBase 默认配置  ,原文:http://eclecl1314-163-com.iteye.com/blog/1474286 该文档是用hbase默认配置文件生成的,文件源是 hbase-defa ...

  7. ubuntu环境变量

    在Ubuntu中有如下几个文件可以设置环境变量1./etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.2. ...

  8. 高性能JS笔记3——DOM编程

    一.访问与修改DOM DOM和JS 相当于两个岛屿,访问操作的次数越多,要交的过路费越多,对性能产生很大影响. 减少访问DOM的次数,把运算尽量留在JS端操作. 二.innerHTML 对比 DOM ...

  9. vbs操作excel

    航天金税系统升级,导出的Excel文件格式与原来有的差异,老的数据导入程序识别不了该文件,对比了新老文件后,发现新文件在专票和普票的“份数”行前增加了一行,同时增加了“单据号”列,通过脚本 把这些删除 ...

  10. 使用Masonry搭建特殊布局时与xib的对比

    之前只有比较浅的接触过Masonry.项目中大多数的布局还是用xib中的AutoLayout与手码的frame计算相结合,相信也会有很多项目和我一样是这两种布局的组合.其实xib各方面用的感觉都挺好, ...