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

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

实例

带有两个输入字段和相关标记的简单 HTML 表单：

<form>

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

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

  <br />

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

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

</form>

下面是例子：








  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    5. 

  5. <title>无标题文档</title>
    6. 

  6. </head>
    7. 

  7. <body>
    8. 

  8. <table>
    9. 

  9. <tr>
    10. 

  10. <td><label for="username">用户名：</label></td>
    11. 

  11. <td><input type="text" name="username" id="username"></td>
    12. 

  12. </tr>
    13. 

  13. <tr>
    14. 

  14. <td><label for="password">密码：</label></td>
    15. 

  15. <td><input type="password" name="password" id="password"></td>
    16. 

  16. </tr>
    17. 

  17. <tr>
    18. 

  18. <td><label for="repassword">密码确认：</label></td>
    19. 

  19. <td><input type="password" name="repassword" id="repassword"></td>
    20. 

  20. </tr>
    21. 

  21. <tr>
    22. 

  22. <td><label for="_basketball">爱好：</label></td>
    23. 

  23. <td>
    24. 

  24. <label><input type="checkbox" value="basketball" name="hobby" id="_basketball">basketball</label>
    25. 

  25. <label><input type="checkbox" value="football" name="hobby" id="_football">football</label>
    26. 

  26. <label><input type="checkbox" value="skating" name="hobby" id="_skating">skating</label>
    27. 

  27. <label><input type="checkbox" value="dance" name="hobby" id="_dance">dance</label>
    28. 

  28. </td>
    29. 

  29. </tr>
    30. 

  30. <tr>
    31. 

  31. <td><label for="_boy">性别：</label></td>
    32. 

  32. <td>
    33. 

  33. <label><input type="radio" value="boy" name="sex" id="_boy">boy</label>
    34. 

  34. <label><input type="radio" value="girl" name="sex">girl</label>
    35. 

  35. </td>
    36. 

  36. </tr>
    37. 

  37. <tr>
    38. 

  38. <td><label for="email">邮箱：<label></td>
    39. 

  39. <td><input type="text" name="email" id="email"></td>
    40. 

  40. </tr>
    41. 

  41. <tr>
    42. 

  42. <td><label for="address">住址：</label></td>
    43. 

  43. <td><input type="text" name="address" id="address"></td>
    44. 

  44. </tr>
    45. 

  45. </table>
    46. 

  46. </body>
    47. 

  47. </html>

<label>标签for属性的更多相关文章

  1. label标签的属性

    //label标签的属性 - (void)viewDidLoad { //初始化一个label1标签对象,初始化有很多方法,最原始的就是init,此处用带有frame的方法 UILabel *labe ...

  2. <label>标签for属性的妙用

    在用户注册的时候,常常用户点击文字就需要将光标聚焦到对应的表单上面,这个是怎么实现的呢?就是下面我要介绍的<label>标签的for属性 定义:for 属性规定 label 与哪个表单元素 ...

  3. label标签的用法

    label 标签for属性 <h1>显式指定通过for(for的值就是对应radio的id的值)</h1> <form> <label for="m ...

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

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

  5. HTML label标签的for属性--input标签的accesskey属性

    本次示例是在firefox演示(如果其他浏览器对accesskey操作不成功的,请参考文章最后各浏览器下的快捷键)label的for属性是和input的id绑定,当我们点击input前面的文本标识会自 ...

  6. HTML<label> 标签的 for 属性

    定义和用法 for 属性规定 label 与哪个表单元素绑定. 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <l ...

  7. 获取label标签内for的属性值-js

    <body> <div class="row_2" id="ass"> <label for="aaa"> ...

  8. HTML <option> 标签的属性:selected ; disabled ; label ; value;

    HTML <option> 标签的属性:selected ;  disabled ; label ; value; 1. selected="selected" sel ...

  9. WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

    一．前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本 ...

随机推荐

  1. 第三章：systemverilog文本值和数据类型

    1.增强的文本值 2.改进的`define文本替换 3.时间值 4.新的变量类型 5.有符号和无符号类型 6.静态和动态变量(***) 7.类型转换 8.常数 增强的文本值(文本赋值增强) 主要是:位 ...

  2. 转载：rest-framework框架的基本组件

    知识预览 快速实例 序列化 视图三部曲 认证与权限组件 解析器 分页 回到顶部 快速实例 Quickstart 回到顶部 序列化 创建一个序列化类 简单使用 开发我们的Web API的第一件事是为我们 ...

  3. Java中的事务——全局事务与本地事务

    转载,原文来源 http://www.hollischuang.com Java事务的类型有三种:JDBC事务.JTA(Java Transaction API)事务.容器事务.这是从事务的实现角度区 ...

  4. There is no getter for property named 'id' in class 'java.lang.String'

    https://blog.csdn.net/u011897392/article/details/46738747 使用mybatis传入参数,如果在mappin.xml中使用<if>标签 ...

  5. jsp页面遍历输出

    <c:foreach>类似于for和foreach循环 以下是我目前见过的用法: 1.循环遍历,输出所有的元素.<c:foreach items="${list}" ...

  6. php 时间 数组替换

    //随机数和时间//随机数生产器//echo rand();//echo "<br>";//生成某个范围的随机数//echo rand(0,10);//echo &qu ...

  7. C#通信学习（一）

    基础知识 TCP/IP:Transmission Control Protocol/Internet Protocol,传输控制协议/因特网互联协议,又名网络通讯协议.简单来说:TCP控制传输数据,负 ...

  8. 【转】关于大型网站技术演进的思考（二十）--网站静态化处理—web前端优化—中（12）

    Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...

  9. Vim command handbook

    /* 本篇文章已经默认你通过了vimtuor训练并能熟练使用大部分命令.此篇文章主要是对于tutor命令的总结和梳理.适合边学习边记忆 tutor那个完全是在学习中记忆 符合认知规律但是练习有限.所以 ...

  10. [APIO2012] 派遣 dispatching

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 4580  Solved: 2348 Description 在一个忍者的帮派里,一些忍者们被选中派遣给 ...