label的for属性
一、使用介绍
<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
哎,昨天晚上就不能上传了,所以图片就不传了。
效率还挺高的。

html5给<label>新增了一个form属性来规定label所属的一个或多个表单,多个表单用空格分隔。还没真正用过,用到补充。
label的for属性的更多相关文章
- WinForms中的Label的AutoSize属性
当大量使用UserControl组合UI时,如果更改了Label的Text属性,Label.AutoSize属性会影响UserControl的OnLoad事件的发生顺序; public overrid ...
- label标签的属性
//label标签的属性 - (void)viewDidLoad { //初始化一个label1标签对象,初始化有很多方法,最原始的就是init,此处用带有frame的方法 UILabel *labe ...
- label 的for属性总结
一.使用介绍 1. 定义:for属性规定label与哪个表单元素绑定. <label>是专门为<input>元素服务的,为其定义标记. label 和表单控件绑定方式有两种: ...
- 用图片作为label,for属性IE下不起作用
IE浏览器存在一个BUG,当你使用label的for属性达到点击label使对应的表单元素聚焦,label中的内容为图片时,IE浏览器下不起作用. 例如: <input type="c ...
- 关于<label>的for属性的简单探索
在freecodecamp上HTML教程的Create a Set of Radio Buttons这一节中,看到这样一段话, It is considered best practice to se ...
- label 的autosize属性
label 的autosize属性,显示不全的问题.
- <label>标签for属性的妙用
在用户注册的时候,常常用户点击文字就需要将光标聚焦到对应的表单上面,这个是怎么实现的呢?就是下面我要介绍的<label>标签的for属性 定义:for 属性规定 label 与哪个表单元素 ...
- html中label及加上属性for之后的用法
定义和用法 <label> 标签为 input 元素定义标签(label). label 元素不会向用户呈现任何特殊的样式.不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元 ...
- <label>标签for属性
label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控 ...
随机推荐
- 使用 WordPress 插件模板开发高质量插件
WordPress 插件样板是标准化的,有组织的,面向对象的基础,用于构建高品质的 WordPress 插件.样板遵循编码标准和文件标准,所以你不必自己学习这些,根据注释编写代码即可. 官方网站 ...
- emberjs学习二(ember-data和localstorage_adapter)
emberjs学习二(ember-data和localstorage_adapter) 准备工作 首先我们加入ember-data和ember-localstorage-adapter两个依赖项,使用 ...
- sharepoint 开发相关工具总结
1.CAML Designer 2013 开发caml用 http://biwug-web.sharepoint.com/SitePages/Caml_designer.aspx 2.SharePoi ...
- JSON 转javabean 利器
别再对着json来手写javabean啦.这个工作完全不要脑子,而且耗时. 这里给大家提供三种方式: android studio版: 万能的插件:GsonFormat 如何安装? Preferenc ...
- 【iOS】使用safari对webview进行调试
[iOS]使用safari对webview进行调试 在web开发的过程中,抓包.调试页面样式.查看请求头是很常用的技巧.其实在iOS开发中,这些技巧也能用(无论是模拟器还是真机),不过我们需要用到ma ...
- Mark一下,Android ListView的上下间隙
困扰很久的问题,怎么给ListView上下加padding,可以跟随滚动的那种 android:paddingTop="10dp" android:paddingBottom=&q ...
- 单例模式-用GCD实现
用GCD实现单例模式的步骤: 步骤1. 创建头文件 XZSingleton.h,里面代码如下: // .h文件 #define XZSingletonH(name) + (instancetype)s ...
- NPOI对Excel的操作(Sheet转DataTable、List<T>)
通过NPOI对Excel进行操作,这里主要是读取的操作.封装到ExcelHelper操作类中. 1 using System.Collections.Generic; 2 using NPOI.HSS ...
- 《AngularJS高级程序设计》学习笔记
一.AngularJS应用剖析 AngularJS存在一些最主要的构件,如模型,视图和控制器.但AngularJS中也有许多其他可供灵活使用的部件,包括模块,指令,过滤器,工厂和服务. 一 . 1 ...
- SYN Flood应如何应对
1 什么是SYN Flood攻击 在TCP三次握手时,服务器接收客户端的SYN请求,操作系统将为该请求分配一个TCP(Transmission Control Block),服务器返回一个SYN/AC ...