小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签--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. [转]Windows Azure上安装SharePoint 2013

    基于Windows Azure 安装SharePoint 2013 前段时间写的基于Windows Azure安装SharePoint系列,由于Azure的体验账号过期了,所以不得不暂停.今天有幸参加 ...

  2. 开始LXC,DOCKER,VAGRANT,COREOS之旅

    很有兴趣哟. 有人说会重构互联基质,可能言重. 但,无疑在未来几年内,DOCKER和COREOS这样的更新布置模式会流行.

  3. 用Java实现非阻塞通信

    用ServerSocket和Socket来编写服务器程序和客户程序,是Java网络编程的最基本的方式.这些服务器程序或客户程序在运行过程中常常会阻塞.例如当一个线程执行ServerSocket的acc ...

  4. Android Wear开发 - 卡片通知 - 第二节 : 自定义Wear卡片样式

    一.前言说明 在上一节添加Android Wear通知特性我们实现了简单的Android Wear卡片拓展,但是默认提供给我们的多张卡片只能实现简单的文字展示,如果想要自定义布局,添加图片等等,则需要 ...

  5. 由 char（）函数返回的 ASCII字符集中的功能/控制字符

    如果在excel下的单元格写入公式:=“国际经济与贸易”&CHAR(10)&"401班"&CHAR(10)&"A组".则出现: ...

  6. Linux on Power 上的调试工具和技术

     Linux on Power 上的调试工具和技术 简介: 调试是一项主要的软件开发活动,作为应用程序开发人员,您无法避免对程序进行调试.有效的调试不仅能缩短软件开发周期,而且可以节省成本.本文简要介 ...

  7. bzoj3744

    这道题是目前我做bzoj最感动的一题没有之一……首先先警示一下,分块的题目能不套主席树尽量不套因为主席树不仅回答来一个log而且常数也比较大,对于分块这种根号的算法非常不适合这里是求区间逆序对,考虑查 ...

  8. 后缀自动机(SAM)：SPOJ Longest Common Substring II

    Longest Common Substring II Time Limit: 2000ms Memory Limit: 262144KB A string is finite sequence of ...

  9. How many - HDU 2609 （trie+最小表示）

    题目大意:有 N 个手链,每个手链的最大长度不超过100,求出来最多有多少个不同的手链.   分析:因为手链是可以转动的,所以只要两个手链通过转动达到相同,那么也被认为是一种手链,然而如果每次都循环比 ...

  10. php中应该哪怕被打断腿都要记得的几个函数

    php中应该哪怕被打断腿都要记得的几个函数: substr() 截取字符串 : explode() 使用一个字符串分割另一个字符串 : implode() 将数组用预定的字符连接成字符串: 下面有一个 ...