利用 Label 小小的提升一下用户体验
label ,Html 标签里面很普通的一个,可是她却有一个很独特的作用,我不知道我是忘了她还是不曾记得她,下面简单介绍一下她。
一、定义和用法
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的"for" 属性可把 label 绑定到另外一个元素,请把 "for" 属性的值设置为相关元素的 id 属性的值。
二、浏览器支持
所有主流浏览器都支持 <label> 标签。
Safari 2 或更早的版本不支持 <label> 标签。
三、实例
<div>
<label><input type="radio" name="sex"/>点击文字即可选择->男</label>
<label><input type="radio" name="sex"/>不用刻意去点击按钮->女</label>
<br /><br /> <label><input type="checkbox" name="taste"/>checkbox也支持->咸</label>
<label><input type="checkbox" name="taste"/>checkbox也支持->淡</label>
<br /><br /> <span><input type="radio" name="nsex"/>span标签就没有这效果->不男</span>
<span><input type="radio" name="nsex"/>span标签就没有这效果->不女</span>
<br /><br /> <b><input type="checkbox" name="ntaste"/>b标签也没有这效果->不咸</b>
<b><input type="checkbox" name="ntaste"/>b标签也没有这效果->不淡</b>
<br /><br /> <label for="ren3">
点击知道屌丝类型->指定绑定某个值(纯属恶搞,请勿在意)<br/><br/>
<input id="ren1" type="checkbox" name="peopleType"/>男妹子
<input id="ren2" type="checkbox" name="peopleType"/>女汉子
<input id="ren3" type="radio" name="peopleType" />程序猿
<input id="ren4" type="radio" name="peopleType"/>程序媛
</label>
</div>
总结:虽然看似作用不大,但是个人感觉还是不错的,算是增加了按钮的触发范围吧,也算是小小的提升了一下用户体验。:)
利用 Label 小小的提升一下用户体验的更多相关文章
- 提升网站用户体验—WebP 图片的高效使用
一.WebP 的由来 现代图像压缩技术对我们的生活方式影响很大.数码相机能将上千张高质量图片存储到一张内存卡里.智能手机可以与邻近设备快速分享高分辨率的图片.网站与手机等移动设备能快速展示各种富媒体. ...
- APP开发中,如何从UI设计上提升APP用户体验
设计中有很多细微的东西要注意,就如UI设计中,元素的统一性,图标风格.段落的排版等等,只有能注意这些细节,你的 APP UI 才算合格. 干货君总结了17个提升用户体验的 UI 设计小技巧,也是我们日 ...
- Oboe 提升web 用户体验以及性能
Oboe 地址:http://oboejs.com/ 1.安装 bower bower install oboe 2.使用,ajax 模式 oboe('/myapp/things.json') ...
- QQ邮箱打败163邮箱的过程(重视用户体验的结果)
引用 楼主 CKAOS 的回复: 目前负责一个项目,ASP.NET的,做一个网盘系统,别的都弄好了,只差一个下载文件夹的功能未实现,只能在服务器端打包成压缩文件,再发回浏览器.如何直接下载文件夹,不是 ...
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
- C#微信公众号接口开发,灵活利用网页授权、带参数二维码、模板消息,提升用户体验之完成用户绑定个人微信及验证码获取
一.前言 当下微信公众号几乎已经是每个公司必备的,但是大部分微信公众账号用户体验都欠佳,特别是涉及到用户绑定等,需要用户进行复杂的操作才可以和网站绑定,或者很多公司直接不绑定,而是每次都让用户填写账号 ...
- jQuery 浮动标签插件,帮助你提升表单用户体验
浮动标签模式(Float Label Pattern)是最新流行的一种表单输入域的内容提示方式,当用户在输入框输入内容的时候,原先占位符的内容向上移动,显示在输入的内容的上面.这里推荐的这款 jQue ...
- 界面优化--如何提升用户体验(Velocity.js和GSAP)
Velocity.js和GSAP 我们需要提升代码质量来留住用户.作为用户界面的建设者,我们的工作是迅速引导和引导用户的注意力,指导他们如何有效地使用我们的应用程序. 1. 如何提升代码质量 定向聚焦 ...
- Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..
Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid Ap ...
随机推荐
- Oracle常用指令
/** 为了清晰化的显示:所有固定命令都是用大写格式显示 SQL语法分类:DML,DDL,DCL (1)DML(Data Manipulation Language ,数据库操作语言): 数据:增加 ...
- WUST 设计模式 实验九 观察者模式的应用
实验九 观察者模式的应用 一.实验目的 掌握外观模式(Observer)的特点: 分析具体问题,使用外观模式进行设计. 二.实验内容和要求 网上商店中如果商品(product)在名称(name). ...
- asp.net core-2.在vs2017中创建asp.net core应用程序
今天我们用vs2017创建一个asp.net core 的应用程序,打开vs2017 点击:文件—>项目,选择asp.net core web 应用程序 点击确定 红框内就昨天用控制台去创建的应 ...
- Educational Codeforces Round 65 (Rated for Div. 2)
A:签到. #include<bits/stdc++.h> using namespace std; #define ll long long #define inf 1000000010 ...
- Angularjs 中 ng-repeat 循环绑定事件
用ng-repeat循环是如果有ng-click之类的事件需要传入参数我们一般这样写 <span class='del' ng-click="RemoveCost({{item.Id} ...
- C#通过重载构造函数传递参数、实现两个窗体下的方法的互相调用
直接切入主题 有时候同一个项目下我们可能会使用多个窗体,窗体间方法互相调用也不可避免,好了,使用无参无返回值的方法,开始上图 1.新建一个winform项目Form1,并再添加一个窗体Form2:拖入 ...
- puml 用于代码注释
notebook 笔记本 @startuml rectangle sql_decode.py{ object SQLDataset object Name SQLDataset : meta = &q ...
- bat实现守护程序保证平台正常运行
1.systeminfo查看系统最近一次重启时间: 2.杀进程: :start taskkill /f /im "xx.exe" goto start "xx.exe&q ...
- string和char*
string转const char* string s = "hello furong."; const char *c = s.c_str(); string转char* str ...
- Array+DP leetcode-11.装更多的水
11. Container With Most Water 题面 Given n non-negative integers a1, a2, ..., an , where each represen ...