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>

最新文章

  1. Python virtualenv安装库报错SSL: CERTIFICATE_VERIFY_FAILED
  2. Cv运动分析与对象跟踪(转)
  3. Umbraco入门（一)--在VS中安装Umbraco
  4. JQuery easyui （4）LinkButtion（按钮）组件
  5. MapReduce调度与执行原理之作业提交
  6. Hive 行列转换
  7. java乱码详解（java中byte与char的转换）
  8. jquery validate 动态增加删除验证规则
  9. oracle初试、函数、增删改查、多表查询
  10. springboot~如何去掌握它（新手可以看看）
  11. 状压DP总结
  12. Django contenttypes 应用
  13. javascript arguments参数问题
  14. Chap5:操作文件和目录[The Linux Command Line]
  15. This Gradle plugin requires Studio 3.0 minimum
  16. python技巧 合并两个字典
  17. 层次聚类 Hierarchical Clustering
  18. How to Verify Email Address
  19. spring cloud 消费者
  20. Android系统root破解原理分析

热门文章

  1. ASP.NET MVC中如何在客户端进行必要的判断
  2. 03001_Http协议
  3. 【02】sass更新的方法
  4. Action中result的各种转发类型
  5. BNUOJ 1575 Supermarket
  6. 相应缓存设置HttpCacheability 枚举
  7. 【尺取】HDU Problem Killer
  8. 深入理解计算机操作系统——第11章：全球IP英特网
  9. 《effective C++》：条款36——绝不重新定义继承而来的非虚函数
  10. SGU 106 The equation【扩展欧几里得】