HTML label标签的一点理解
label标签为input元素定义标注。
label元素不呈现任何特殊效果。不过他为鼠标用户改进了可用性。如果你在label元素内点击文本就会触发此控件。就是说当用户选择该标签是，浏览器就会自动的将焦点转到与表单相关的控件上来。
其有两个属性for from。
for 规定绑定到哪一个表单元素上。（label元素的for属性值必须和相关表单元素的id属性值相同）
from规定字段所属的一个或多个表单。
例：常见的网页侧边栏弹出效果也可以完全用css动画实现。此时label标签就得到应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
} p{
padding: 10px 0;
}
body{
min-height: 100%;
}
input{
display: none;
}
aside{
position: absolute;
left: -200px;
top: 0;
bottom: 0;
width: 200px;
background-color: #BB6868;
transition:0.25s ease-out;
-webkit-transition:0.25s ease-out;
}
#sidebutton:checked + aside{
left: 0;
}
#sidebutton:checked ~ #wrap{
padding-left: 220px;
}
#wrap{
margin-left: 20px;
padding: 10px;
transition:0.25s ease-out;
-webkit-transition:0.25s ease-out;
}
#wrap>label{
border:none;
background-color: green;
color: white;
}
#wrap>label:hover{
background: #000;
}
</style>
</head>
<body>
<input type="checkbox" id="sidebutton">
<aside>导航栏</aside>
<div id="wrap">
<label for="sidebutton">Menu</label>
<p>HTML和CSS实现侧边栏弹出效果</p>
</div>
</body>
</html>
此例很好的展示了label标签的应用。通过label标签与input的结合在应用上css动画可以很好的解决网页上面的一些简单点击动画效果。（如ppt效果的幻灯片也可以用此实现）
HTML label标签的一点理解的更多相关文章
- 在学习HTML——form表单中的label标签时的一点小体会
在我啃了一遍书本之后,开始了在慕课看视频的过程,从最开始的HTML+CSS的基础课程看起,在第5-9小节讲到了form表单的label标签, 首先看一下慕课的讲解: label 标签不会向用户呈现任 ...
- 说说HTML5中label标签的可访问性问题——张鑫旭
一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...
- WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展
一．前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本 ...
- [HTML5]label标签使用以及建议
for 属性规定 label 与哪个表单元素绑定. 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <label&g ...
- a标签中的label在IE下触发不了a标签的href链接（label标签——解析）
<a href="http://www.baidu.com/" target="_blank"> <span>百度</span&g ...
- RxSwift 入坑好多天 - 终于有了一点理解
一.前言 江湖上都在说现在就要赶紧学 swift 了,即将是 swift 的天下了.在 api 变化不大的情况下,swift 作为一门新的语言,集众家之所长,普通编码确实比 oc 要好用的多了 老早就 ...
- 【转】WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展
一．前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要是对文本输入控件进行样式开发,及相关扩展功能开发,主要内容包括: 基本文 ...
- mycat的schema.xml的个人的一点理解
官方文档里讲的详细的部分的我就不再赘述了,我只是谈谈我自己的理解 刚开始接触mycat,最重要的几个配置文件有server.xml,schema.xml,还有个rule.xml配置文件 具体都是干啥用 ...
- 关于css中层叠性的一点理解
关于css层叠性的一点理解 标签(空格分隔): html css 我们平时在写css的时候会遇到这样的情况 <!DOCTYPE html> <html lang="en&q ...
随机推荐
- LINUX 下grep命令查找
当出现查找文件出现匹配到二进制文件时,大概是因为文件同时含有文本文件与二进制文件,需要加上 grep -a,就可以解决问题.
- 使用Word2013发布博客
步骤一.新建博客文章 打开Word软件,新建->博客文章(第一次在模板下面可能找不到,可以在搜索栏中搜索"博客",下次在首页就能直接找到). 步骤二.编辑博客文章 1.输入文 ...
- 一个哥们看到数据库日志不断增大 [log_reuse_wait_desc]为replication 之后的做法
一哥们看到数据库日志不断增大 [log_reuse_wait_desc]为replication 之后的做法 一天那个哥们看到数据库日志暴涨,用sys.databases 视图看一下[log_reus ...
- HTML5- Canvas入门（七）
这是本系列的最后一篇入门文章,主要是对剩余的未说明的canvas方法来逐个介绍. 首先,如果你是一名擅长矢量设计的设计师,对Illustrator或者Fireworks很熟悉的话,那你肯定知道它们有一 ...
- 操作系统核心原理-7.设备管理：I/O原理
一.I/O的基本知识 1.1 为何要有I/O 前面阐述了操作系统具有进程管理.内存管理.外存管理三大核心功能,但是计算机归根是为人类服务的,这就要求计算机必须提供某种机制使得人们可以向计算机发出命令或 ...
- .NET中那些所谓的新语法之四：标准查询运算符与LINQ
开篇:在上一篇中,我们了解了预定义委托与Lambda表达式等所谓的新语法,这一篇我们继续征程,看看标准查询运算符和LINQ.标准查询运算符是定义在System.Linq.Enumerable类中的50 ...
- [.net 面向对象程序设计进阶] (24) 团队开发利器（三）使用SVN多分支并行开发(下)
[.net 面向对象程序设计进阶] (24) 团队开发利器(三)使用SVN多分支并行开发(下) 本篇导读: 接上篇继续介绍SVN的高级功能,即使用分支并行开发.随着需求的不断变更,新功能的增加.特别是 ...
- RCF进程间通信Demo程序
在上一篇文章RPC通信框架--RCF介绍中,介绍了RCF的优点,本篇文章从头开始演示如何用RCF编写一个跨进程通信的Demo程序. 将RCF编译为静态库 从官网下载到的源码中包含一个RCF的项目,但是 ...
- ASP.NET MVC 5 - 视图
在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (44) ------ 第八章 POCO之POCO中使用值对象和对象变更通知
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 8-4 POCO中使用值对象(Complex Type--也叫复合类型)属性 问题 ...