label 的for属性总结
一、使用介绍
1. 定义:for属性规定label与哪个表单元素绑定。
<label>是专门为<input>元素服务的,为其定义标记。
label 和表单控件绑定方式有两种:
方法一:将表单控件作为label的内容,这种就是隐士绑定。
此时不需要for属性,绑定的控件也不需要id属性。
隐式绑定:
<label>Date of Birth: <input type="text" name="DofB" /></label>
方法二:为label标签下的for属性命名一个目标表单的id,这种就是显示绑定。
显式绑定:
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />
二、为什么要给label上面加上for属性
给 label 加了 for 属性绑定了input控件后,可以提高鼠标用户的用户体检。
如果在label 元素内点击文本,就会触发此控件,也就是说,当用户渲染该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
补充:
label 的 for属性给 select绑定 ,点击Male ,select只会闪下(自己测试的):
<label for="male">Male</label>
<select id="male">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<label for="female">Female</label>
<select>
<option>一</option>
<option>二</option>
<option>三</option>
</select>
html5给<label>新增了一个form属性来规定label所属的一个或多个表单,多个表单用空格分隔。
参考资料:http://www.cnblogs.com/starof/p/4545525.html
label 的for属性总结的更多相关文章
- WinForms中的Label的AutoSize属性
当大量使用UserControl组合UI时,如果更改了Label的Text属性,Label.AutoSize属性会影响UserControl的OnLoad事件的发生顺序; public overrid ...
- label的for属性
一.使用介绍 <label>专为input元素服务,为其定义标记. for属性规定label与哪个表单元素绑定 label和表单控件绑定方式又两种: 1.将表单控件作为label的内容,这 ...
- label标签的属性
//label标签的属性 - (void)viewDidLoad { //初始化一个label1标签对象,初始化有很多方法,最原始的就是init,此处用带有frame的方法 UILabel *labe ...
- 用图片作为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 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控 ...
随机推荐
- 消息中间件之一:RabbitMQ
RabbitMQ 是一个实现了AMQP(高级消息队列协议)的消息队列,最初起源于金融系统,主要用来实现应用程序间的异步和解耦,可用于在分布式系统中做消息的存储转发 相比于传统的队列服务概念(消息发送者 ...
- WEB服务器,TOMCAT和servlet之间的关系
WEB服务器,TOMCAT和servlet之间的关系 什么是WEB服务器Web服务器是指能够为发出请求的浏览器提供文档的程序.服务器是 一种被动程序,只有浏览器发出请求的时候才会响应.应用层使用 的是 ...
- js前后五年的时间日期万年历
<script src='bootstrap/js/jquery-1.11.2.min.js'></script>//引入JQUERY文件<div> <sel ...
- centos7 lamp
yum install libmcrypt libmcrypt-devel mcrypt mhash zlib zlib-devel libpng libpng-devel freetype free ...
- 【JavaScript】DOM和BOM之我的理解
2018年12月17日 一.我们能够对html文档和浏览器做的操作 (一)html文档 增.删.改.可以在html中增加.删除.改动元素 (二)浏览器 地址栏:输入.修改地址 历史记录:前进.后退.跳 ...
- Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined)
C 模拟 题意:给的是一个矩形,然后√2 的速度走,如果走到边上就正常反射,走到角上,暂停反射,我们知道要不循环要不暂停,记录走到的点最短时间 /*************************** ...
- Android的JSON数据解析
一. 使用原生方式解析 准备工作:准备一个布局文件,用来显示元数据与转换之后的数据 <?xml version="1.0" encoding="utf-8" ...
- 用JavaScript+css制作下拉式菜单
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 【题解】Luogu P5251 [LnOI2019]第二代图灵机
原题传送门 前置芝士:珂朵莉树 珂朵莉树的主要功能是区间赋值 这道题还算明显(操作2) 一开始看见这题觉得很毒瘤,但仔细想想发现颜色和数字之间没有什么关系 我们一共要维护三个东西: 1.区间和:树状数 ...
- unity 根据平板 或者 手机 确立横竖屏
/* ######### ############ ############# ## ########### ### ###### ##### ### ####### #### ### ####### ...