×

label标签:提高用户体验,为用户提高最优秀的服务

作者:andy0012020.08.10来源:Web前端之家浏览:459评论:0
关键词:label
微信公众号

微信公众号

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

作用:

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。当我们鼠标点击 label标签里面的文字时, 光标会定位到指定的表单里面

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

经常见到这样的表单元素,比如:点击一张图片可以重新更换图片。

之前的做法是写一个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>

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.miarww.com.cn/article/html541sdfjoiuriwue.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright ? 2020 Web前端之家(www.miarww.com.cn) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.5 Valyria

时时彩平台哪个好 极速赛车公式技巧个人经验 炒股毁一生,打板穷三代 快乐双彩走势图综合 多乐网软件 期货配资是什么意思 今天内蒙古快3走势图 十一选五定一胆百分之98准 急速赛车计划软件 甘肃省快3玩法必中技巧 北京pk拾前一的技巧 新疆11选5开奖直播 快乐扑克051377期 6 1体彩开奖结果浙江 湖北快3开奖时间 深圳风采彩票开奖结果官网 福彩福建快三开奖结果查询