一、使用介绍

<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. mongoDB简介

    概述 MongoDB 是一款跨平台.面向文档的数据库.用它创建的数据库可以实现高性能.高可用性,并且能够轻松扩展.MongoDB 的运行方式主要基于两个概念:集合(collection)与文档(doc ...

  2. 分享50款 Android 移动应用程序图标【下篇】

    在这个移动程序流行的时代,持续增长的应用程序经济充满了商业机遇.任何对应用程序设计感兴趣的人,将会喜欢上这里的50个独特的 Android 应用程序图标.这些例子中的图标能够让应用程序的设计更具吸引力 ...

  3. css居中完全指南(翻译)

    最近参加了百度的前端技术学院,任务4是要求一个元素在父元素中水平和垂直居中,提供的一篇文章对各种情况都进行了分析,很不错,英文也不是那么难懂,毕竟代码还是主体,翻译过来分享出来,翻译内容带有自己的理解 ...

  4. 苹果浏览器和uc浏览器在移动端的坑(日常积累,随时更新)

    先mark 1 .  移动端uc浏览器不兼容css3 calc() 2 .  ie8下a标签没有内容给宽高也不能触发点击跳转 3 . safari输入框加上readOnly="ture&qu ...

  5. javascript --- 设计模式之Module模式

    基本用法 先看一下最简单的一个实现,代码如下: var Calculator = function(){ // 这里可以声明私有成员 var eqCtrl = document.getElement( ...

  6. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q4-Q5)

    Question 4 You are designing a SharePoint 2010 application to store 50 GB of digital assets, includi ...

  7. Mac本“安全性与隐私”里没有“任何来源”选项

    打开"偏号设置"----->"安全性与隐私"----->"通用",里面没有"任何来源",怎么解决? 如果需要 ...

  8. Android 手机卫士--自定义组合控件构件布局结构

    由于设置中心条目中的布局都很类似,所以可以考虑使用自定义组合控件来简化实现 本文地址:http://www.cnblogs.com/wuyudong/p/5909043.html,转载请注明源地址. ...

  9. Android Actitity的生命周期

    新建项目,MainActivity代码如下: package com.wuyudong.lifecycle; import android.os.Bundle; import android.app. ...

  10. iOS 设备标识

    //UUID    NSLog(@"-=-=-=-=-=-=-=-==-=-==qqqqqqqqqqqqqqqqqqqqqqq:::::::::::%@", [[NSUUID UU ...