在用户注册的时候，常常用户点击文字就需要将光标聚焦到对应的表单上面，这个是怎么实现的呢？就是下面我要介绍的<label>标签的for属性

定义：for 属性规定 label 与哪个表单元素绑定

  1. <!--
  2. 显式的联系：
  3. <label for="SSN">Social Security Number:</label>
  4. <input type="text" name="SocSecNum" id="SSn" />
  5. 隐式的联系：
  6. <label>Date of Birth: <input type="text" name="DofB" /></label>
  7. -->

下面是例子：

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    5. <title>无标题文档</title>
    6. </head>
    7. <body>
    8. <table>
    9. <tr>
    10. <td><label for="username">用户名：</label></td>
    11. <td><input type="text" name="username" id="username"></td>
    12. </tr>
    13. <tr>
    14. <td><label for="password">密码：</label></td>
    15. <td><input type="password" name="password" id="password"></td>
    16. </tr>
    17. <tr>
    18. <td><label for="repassword">密码确认：</label></td>
    19. <td><input type="password" name="repassword" id="repassword"></td>
    20. </tr>
    21. <tr>
    22. <td><label for="_basketball">爱好：</label></td>
    23. <td>
    24. <label><input type="checkbox" value="basketball" name="hobby" id="_basketball">basketball</label>
    25. <label><input type="checkbox" value="football" name="hobby" id="_football">football</label>
    26. <label><input type="checkbox" value="skating" name="hobby" id="_skating">skating</label>
    27. <label><input type="checkbox" value="dance" name="hobby" id="_dance">dance</label>
    28. </td>
    29. </tr>
    30. <tr>
    31. <td><label for="_boy">性别：</label></td>
    32. <td>
    33. <label><input type="radio" value="boy" name="sex" id="_boy">boy</label>
    34. <label><input type="radio" value="girl" name="sex">girl</label>
    35. </td>
    36. </tr>
    37. <tr>
    38. <td><label for="email">邮箱：<label></td>
    39. <td><input type="text" name="email" id="email"></td>
    40. </tr>
    41. <tr>
    42. <td><label for="address">住址：</label></td>
    43. <td><input type="text" name="address" id="address"></td>
    44. </tr>
    45. </table>
    46. </body>
    47. </html>

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

  1. label标签的属性

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

  2. <label>标签for属性

    label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 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. ASP.NET开发在JavaScript有中文汉字时出现乱码时简单有效的解决

    一般情况在使用ASP.NET开发使用JavaScript有中文汉字时不会出现乱码情况,比如:alert('您看到我了吗?');这样直接输入中文汉字的代码中是不会出现乱码的,如果出现了,一是检查Web. ...

  2. springMVC(注解版笔记)

    springMVC(注解版) 较之于非注解版本,发生一下变化: 1.配置文件需要配置的标签有: <!-- 包的扫描,此包下面的所有包都启用注解 --> <context:compon ...

  3. C语言的代码内存布局

    由以下3个部分组成: 1)BSS 段 BSS段(bss segment)通常是指用来存放程序中未初始化的全局变量的一块内存区域.BSS是英文Block Started by Symbol的简称.BSS ...

  4. WordPress的SEO技术

    原文:http://blog.wpjam.com/article/wordpress-seo/ 文章目录[隐藏] 内容为王 页面优化 标题 链接(URL) Meta 标签 语义化 H1 H2 H3 等 ...

  5. bzoj 2095: [Poi2010]Bridges（二分法+混合图的欧拉回路）

    [题意] 给定n点m边的无向图,对于边u,v,从u到v边权为c,从v到u的边权为d,问能够经过每条边一次且仅一次,且最大权值最小的欧拉回路. [思路] 二分答案mid,然后切断权值大于mid的边,原图 ...

  6. bzoj 1419 Red is good（期望DP）

    [题意] R红B蓝,选红得1选蓝失1,问最优状态下的期望得分. [思路] 设f[i][j]为i个Rj个B时的最优期望得分,则有转移式为: f[i][j]=max{ 0,(f[i-1][j]+1)*(i ...

  7. 《Java数据结构与算法》笔记-CH1

    /** * 数据结构的特性 ************************************************************************************** ...

  8. 在EC2上安装MEAN环境

    本文在个人博客上的地址为URL,欢迎品尝. 搭建决策树项目外网DEMO尝试几个地方后,最后选择了EC2(Amazon Elastic Compute Cloud).选择的是最经济便宜的Amazon L ...

  9. 无线 WIFI 的13个信道频率范围

    目前主流的无线WIFI网络设备不管是802.11b/g还是802.11b/g/n 一般都支持13个信道.它们的中心频率虽然不同,但是因为都占据一定的频率范围,所以会有一些相互重叠的情况.下面是13个信 ...

  10. .NET Reactor 命令行使用

    安装.NET Reactor工具软件.例如你的安装目录为:D:\Program Files\Eziriz\.NET Reactor 按如下步骤设置系统环境变量path. 将path变量的值中加入.NE ...