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 小小的提升一下用户体验的更多相关文章

  1. 提升网站用户体验—WebP 图片的高效使用

    一.WebP 的由来 现代图像压缩技术对我们的生活方式影响很大.数码相机能将上千张高质量图片存储到一张内存卡里.智能手机可以与邻近设备快速分享高分辨率的图片.网站与手机等移动设备能快速展示各种富媒体. ...

  2. APP开发中,如何从UI设计上提升APP用户体验

    设计中有很多细微的东西要注意,就如UI设计中,元素的统一性,图标风格.段落的排版等等,只有能注意这些细节,你的 APP UI 才算合格. 干货君总结了17个提升用户体验的 UI 设计小技巧,也是我们日 ...

  3. Oboe 提升web 用户体验以及性能

    Oboe  地址:http://oboejs.com/ 1.安装  bower bower  install oboe 2.使用,ajax 模式 oboe('/myapp/things.json') ...

  4. QQ邮箱打败163邮箱的过程(重视用户体验的结果)

    引用 楼主 CKAOS 的回复: 目前负责一个项目,ASP.NET的,做一个网盘系统,别的都弄好了,只差一个下载文件夹的功能未实现,只能在服务器端打包成压缩文件,再发回浏览器.如何直接下载文件夹,不是 ...

  5. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

  6. C#微信公众号接口开发,灵活利用网页授权、带参数二维码、模板消息,提升用户体验之完成用户绑定个人微信及验证码获取

    一.前言 当下微信公众号几乎已经是每个公司必备的,但是大部分微信公众账号用户体验都欠佳,特别是涉及到用户绑定等,需要用户进行复杂的操作才可以和网站绑定,或者很多公司直接不绑定,而是每次都让用户填写账号 ...

  7. jQuery 浮动标签插件,帮助你提升表单用户体验

    浮动标签模式(Float Label Pattern)是最新流行的一种表单输入域的内容提示方式,当用户在输入框输入内容的时候,原先占位符的内容向上移动,显示在输入的内容的上面.这里推荐的这款 jQue ...

  8. 界面优化--如何提升用户体验(Velocity.js和GSAP)

    Velocity.js和GSAP 我们需要提升代码质量来留住用户.作为用户界面的建设者,我们的工作是迅速引导和引导用户的注意力,指导他们如何有效地使用我们的应用程序. 1. 如何提升代码质量 定向聚焦 ...

  9. Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..

    Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid Ap ...

随机推荐

  1. 剑指offer51:构建乘积数组B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1],不能使用除法

    1 题目描述 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1] ...

  2. LeetCode. 颠倒二进制位

    题目要求: 颠倒给定的 32 位无符号整数的二进制位. 示例: 输入: 00000010100101000001111010011100 输出: 001110010111100000101001010 ...

  3. LC 3. Longest Substring Without Repeating Characters

    题目描述 Given a string, find the length of the longest substring without repeating characters. Example ...

  4. 20191011-构建我们公司自己的自动化接口测试框架-Util的TestDataHandler模块

    TestDataHandler模块主要是做测试数据的处理,包括转换数据格式和变量参数处理转换数据格式函数: data是数据,data以$()的方式识别变量,如果请求的数据有变量,则将变量用global ...

  5. PAT(B) 1018 锤子剪刀布(C:20分,Java:18分)

    题目链接:1018 锤子剪刀布 分析 用一个二维数组保存两人所有回合的手势 甲乙的胜,平,负的次数刚好相反,用3个变量表示就可以 手势单独保存在signs[3]中,注意顺序.题目原文:如果解不唯一,则 ...

  6. 【5号课堂】scratch制作电子生日贺卡

    贺卡在我国的使用由来已久,在古代,上层士大夫有用名帖互相问候的习俗 唐宋以后,贺卡的名称及功能有所进步,称为”门状“或“飞帖“,到了明清,又叫“红单“.“贺年帖“等等,听着名字就知功能越来越世俗化,文 ...

  7. 18-MySQL DBA笔记-MySQL Server调优

    第18章 MySQL Server调优 本章将为读者介绍针对MySQL Server的优化,这也是DBA最熟悉的领域之一.首先我们介绍MySQL的主要参数,然后,讲述常见硬件资源的优化.我们假设读者已 ...

  8. 基于Docker的Kafka部署

    一 准备 1.1 安装docker-dompose #部署 sudo curl -L "https://github.com/docker/compose/releases/download ...

  9. 使用swagger在netcorewebapi项目中自动生成文档

    一.背景 随着前后端分离模式大行其道,我们需要将后端接口撰写成文档提供给前端,前端可以查看我们的接口,并测试,提高我们的开发效率,减少无效的沟通.在此情况下,通过代码自动生成文档,这种需求应运而生,s ...

  10. mysql 2 修改表

    1 修改表名 rename table aaa to bbb; 或者 rename table aaa to bbb; 2 修改字段的数据类型 alter table person modify na ...