zoukankan      html  css  js  c++  java
  • 关于label标签的作用

    label标签的定义和用法:

    <label> 标签为 input 元素定义标注(标记)。

    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    <label> 标签的 for 属性应当与相关元素的 id 属性相同。

                    ——W3school的解释

    经常见到这样的表单元素,比如:点击一张图片可以重新更换图片,或者点击下图所示的复选框

        

    之前我的做法是写一个input标签,设置type为file或者checkbox,设置大小为想要的大小,然后把想要的效果比如上图所示或者一个图片,放在input标签的下面,使input标签刚好可以覆盖住图片,

    最后把input设置成visibility:hidden,所以此时点击的虽然是图片,但是实际上点击的是input框,这样造成的假象就是点击图片实现上传更新。(这样的实现是挺蠢的OTZ)

    后来偶然了解到label标签的作用,才知道label元素和对应id的input元素是互相绑定的,也就是说点击label就相当于点击了input,那这样就好办了,就不需要营造假象了

    所以现在代码可以这么写:

    (1)复选框样式:

    主要HTML代码:

    <label class="demo"> 
        <input type="checkbox" name="">
        <i class="fa fa-check icon-selected"></i>
        <em>多选框1</em>
    </label>

    主要CSS代码:

    input{
        display: none;
    }
    input:checked~em{
        color: #c6636c;
        border:1px solid #c6636c;
    }

    选中之前的样式和选中之后的样式

     

    这样的用法就显得高级多啦

    (2)上传图片样式:

    HTML代码:

    <label class="demo"> 
        <p>点击上传图片</p>
        <input type="file" name="">
        <em></em>
    </label>

    CSS代码:

    input{
        display: none;
    }
    em{
        display: inline-block;
        width: 175px;
        height: 173px;
        background: url(./add.png);
    }

    点击下图所示的图片之后,便可以调用file文件实现图片的选择和上传,之后在进行其他操作

    by 新手小白的记录

  • 相关阅读:
    asp.net 网页标题、关键字、描述
    星级评分jQuery插件
    以jquery为基础的星星评分
    投票系统显示结果jQuery插件
    JAVASCRIPT模拟模式对话窗口
    Repeater 嵌套代码
    window服务程序安装卸载批处理文件
    c#window程序开发入门系列自学笔记
    jquery 模式对话框改进版
    php的正则表达式完全手册
  • 原文地址:https://www.cnblogs.com/lynnmn/p/6856808.html
Copyright © 2011-2022 走看看