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效果的幻灯片也可以用此实现)

时间: 2024-10-16 17:09:22

HTML label标签的一点理解的相关文章

说说HTML5中label标签的可访问性问题——张鑫旭

一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高页面的可用性可访问性是很有帮助的. 我们看看点评网的注册页面那个同意条款的复选框,非要点在复选框上才能选中: 查看HTML发现复选框id和label标签的for属性值都是空,不解~~ 像其他网站的登录或是注册处的控件的点击区域就做得蛮不错的,像是豆瓣网, 新浪微博等:  我们一般有两种方法来优雅地扩

[HTML5]label标签使用以及建议

for 属性规定 label 与哪个表单元素绑定. 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <label> 标签下的 for 属性命名一个目标表单 id,这样就是显式形式. 显式的联系: <label for="SSN">Social Security Number:</label> <input type="text" name=&quo

关于进程的一点理解

一.什么是进程? 进程包含存储在文件中的一组指令,该文件被读入内存并执行.正在执行的每个唯一的实例被称为进程,并且给它唯一一个标识,成为进程ID,它由操作系统确定.比如你在电脑中同时打开两个QQ,那么这两个程序就叫做进程,而且有两个不同的ID号. 二.进程如何创建? 被称为子进程的新进程由父进程的已存在的进程通过调用fork函数创建. pid=fork();//fork函数回传给pid的值是新进程的ID,数据类型为pid_t,属于int型. 子进程被创建为父进程的一个副本. fork函数在成功时

convertView&amp;setTag方法的一点理解

前言 首先我们要知道setTag方法是干什么的,SDK解释为 Tags Unlike IDs, tags are not used to identify views. Tags are essentially an extra piece of information that can be associated with a view. They are most often used as a convenience to store data related to views in th

WPF自定义控件与样式(3)-TextBox &amp; RichTextBox &amp; PasswordBox样式、水印、Label标签、功能扩展

原文:WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式.水印.Label标签.功能扩展 一.前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本输入控件进行样式开发,及相关扩展功能开发,主要内容包括: 基本文本框TextBox控件样式及扩展功能,实现了样式.水印.Label标签.功能扩展: 富

微信小程序组件解读和分析:十一、label标签

label标签组件说明: label标签,与html的label标签基本一样.label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,就会自动将焦点转到和标签绑定的表单控件上,主要用来改进表单组件的可用性.使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件.for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件.目前可以绑定的控件有:<button/>

HTML:form表单中的label标签

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性.如果你在 label 标签内点击文本,就会触发此控件.就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上). 语法: <label for="控件id名称"> 注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同. 例子如下: <form> 你对什么运动感兴趣:<br />

线程的一点理解

一.线程起源 线程的产生基于通过共享公共的内存空间来交换数据可提高协作进程间的通信效率这一思想.线程是程序执行流的最小单元,是进程中的一个实体,一个标准的线程由线程ID.寄存器集合和堆栈组成.是被系统独立调度和分配的基本单位.线程自己不拥有系统资源,只拥有一点儿在运行中必不可少的资源,但它可与同属一个进程的其它线程共享进程所拥有的全部资源.一个线程可以创建和撤消另一个线程,同一进程中的多个线程之间可以并发执行.由于线程之间的相互制约,致使线程在运行中呈现出间断性. 在某一时刻,进程内只有一个称为

第7天:input和label标签

今天学的不多,就只学了表单元素中的input和label标签.搬了房子,收拾了一下东西,太累了,所以没有学很多.明天还上班,今天就先到这. 一.input input标签type属性有以下几个:text.password.textarea.radio.checkbox.button.submit.reset按钮1.<input type="button" value="确定">2.<input type="submit" >