小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签--label，这一小节就来揭晓它的作用。

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

语法：

<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

示例:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>form中的lable标签</title>

</head>

<body>

<form>

   <label for="male">男</label>

  <input type="radio" name="sex" id="male" />

  <br />

  <label for="female">女</label>

  <input type="radio" name="sex" id="female" />

  <br />

  <label for="email">输入你的邮箱地址</label>

  <input type="email" id="email" placeholder="Enter email">

</form>

<form>

    你对什么运动感兴趣：

    <br />

    <label for="run">慢跑</label>

    <input type="checkbox" id="run">

    <br />

    <label for="pashan">爬山</label>

    <input type="checkbox" id="pashan">

    <br />

    <label for="lanqiu">篮球</label>

    <input type="checkbox" id="lanqiu">

</form>

</body>

</html>

效果:

form表单中的label标签的更多相关文章

  1. 在学习HTML——form表单中的label标签时的一点小体会

    在我啃了一遍书本之后,开始了在慕课看视频的过程,从最开始的HTML+CSS的基础课程看起,在第5-9小节讲到了form表单的label标签, 首先看一下慕课的讲解:  label 标签不会向用户呈现任 ...

  2. HTML--form表单中的label标签

    小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用. label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性.如果你在 labe ...

  3. form表单中使用a标签代替button或commit进行数据提交

    1.申明form的id:xxx 2.在<a>标签内书添加属性 onclick="document:xxx.submit()" ​

  4. Unieap3.5-禁用Form表单中的全部标签

    var form=unieap.byId('customerForm'); var children=form.getDescendants(); dojo.forEach(children,func ...

  5. jsp中的form表单中的 id和name有什么区别了

    <form action="./system/WebServer_webServerLogin" method="post" id="login ...

  6. Form表单中method为get和post的区别

    序,form表单中的方法分为get和post,但你都知道他们之间的区别吗? Form表单中method为get和post的区别: 例子如下,有个Form表单. <form action=&quo ...

  7. 今天在研究jquery用ajax提交form表单中得数据时，学习到了一种新的提交方式

    今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...

  8. jQuery中设置form表单中action值的方法

    jQuery中设置form表单中action值的方法 (2011-03-17 10:18:19) 转载▼ 标签: 杂谈   html代码: <form id="myFormId&quo ...

  9. form表单中button按钮返回上一页解决办法

    解决Form中button按钮不好用的问题解决办法. 方法一: 1.在Form表单标签中国增加一个属性,如下图,红框处 2.返回按钮样式 3.onclick方法需要跳转的页面,遮挡处为需要返回的页面 ...

随机推荐

  1. Swordfish

    zoj1203:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1203 题意:给定平面上N个城市的位置,计算连接这N个城市所 ...

  2. IHS怎么通过80端口连接WAS——<转>

    IHS如何通过80端口连接WAS? 经常看到有朋友问这个问题,所以简单总结一下基本步骤:   IHS和WAS之间是通过Plugin来实现的,一般的Plugins和IHS安装在同一物理机器上,WAS安装 ...

  3. union 代替or的情况

    技巧2:union 代替or的情况 当SQL语句中,or 条件上面有一个为子查询,并且子查询上的表与源表不同,这个时候就可以用union代替or或者你发现执行计划中的 filter 有 or 并且 o ...

  4. No row with the given identifier exists[ArtProject.Domains.Users#2]

      产生此问题的原因:              有两张表,table1和table2. 产生此问题的原因就是table1里做了关联<one-to-one>或者<many-to-on ...

  5. 【枚举】Vijos P1496 火柴棒等式 （NOIP2008提高组第二题）

    题目链接: https://vijos.org/p/1496 题目大意: 给你n(n<24)根火柴棍,你可以拼出多少个形如“A+B=C”的等式?("+"和"=&qu ...

  6. [Audio processing] 常见语音特征 —— LPC

    共振峰产生的原理及其在音质上的体现,共振峰的分布位置是建立在声音产生媒介的共鸣物理结构基础上的(Resonant Physical Structure).   无论是人声还是乐器,它们的声音特性都源自 ...

  7. [Locked] Two Sum

    Two Sum II - Input array is sorted Given an array of integers that is already sorted in ascending or ...

  8. Spring与SpringMVC的容器关系分析

    Spring和SpringMVC作为Bean管理容器和MVC层的默认框架,已被众多WEB应用采用,而实际使用时,由于有了强大的注解功能,很多基于XML的配置方式已经被替代,但是在实际项目中,同时配置S ...

  9. Best Reward HDU 3613（回文子串Manacher）

    题目大意:有一个串(全部由小写字母组成),现在要把它分成两部分,如果分开后的部分是回文串就计算出来它的价值总和,如果不是回文的那么价值就是0,最多能得到的最大价值.   分析:首先的明白这个最大价值有 ...

  10. java 复用类的三种方式区别 组合，继承，代理的区别

    1. 组合 : 只需在新类中产生现有类的对象 .(is - a 有一个) 新类是由现有类的对象组成. (引用初始化与作用域?) 2. 继承 : 按照现有类的类型来创造新类. (has - a 有一个) ...