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

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

如：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>label标签的用法</title>

</head>

<body>

    <table>

        <tr>

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

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

        </tr>

        <tr>

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

            <td><input type="password" name="password" id="password"></td>

        </tr>

        <tr>

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

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

        </tr>

        <tr>

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

            <td>

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

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

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

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

            </td>

        </tr>

        <tr>

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

            <td>

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

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

            </td>

        </tr>

        <tr>

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

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

        </tr>

        <tr>

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

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

        </tr>

    </table>

</body>

</html>

label标签的作用的更多相关文章

  1. 关于label标签的作用

    label标签的定义和用法: <label> 标签为 input 元素定义标注(标记). label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label ...

  2. react中label标签的作用

    当我们点击输入内容触发input焦点的时候,就需要使用到label标签里的htmlFor属性来扩大点击的区域 代码如下:

  3. 转：label标签的特殊用法

    容易被忽略的label标签 原始作用 label标签是HTML原生的标签,其原始的作用参考这里 label 标签为 input 元素定义标注(标记). label 元素不会向用户呈现任何特殊效果.不过 ...

  4. 容易被忽略的label标签

    # 容易被忽略的label标签 ## 原始作用 `label`标签是HTML原生的标签,其原始的作用参考[这里](http://www.w3school.com.cn/tags/tag_label.a ...

  5. HTML——label标签

    最近在做将input[type="file"] 改变其样式时,发现label的巨大潜力,特此记录一下. 1, label标签的作用 (1)为input元素定义标注(标记) (2)不 ...

  6. [HTML5]label标签使用以及建议

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

  7. a标签中的label在IE下触发不了a标签的href链接（label标签——解析）

    <a href="http://www.baidu.com/" target="_blank"> <span>百度</span&g ...

  8. form表单中的label标签

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

  9. 第7天：input和label标签

    今天学的不多,就只学了表单元素中的input和label标签.搬了房子,收拾了一下东西,太累了,所以没有学很多.明天还上班,今天就先到这. 一.input input标签type属性有以下几个:tex ...

随机推荐

  1. 如何在markdown中实现缩进，空格，制表符

    参考 https://stackoverflow.com/questions/6046263/how-to-indent-a-few-lines-in-markdown-markup Markdown ...

  2. SAP标准培训课程C4C10学习笔记（四）第四单元

    这个单元的内容是产品主数据和Price list. Hierarchy UI上按钮New的enable/disable逻辑 SAP CRM和C4C数据同步的两种方式概述:SAP PI和HCI 一种轻量 ...

  3. jquery插入第一个元素？ [问题点数：20分，结帖人zsw19909001]

    jquery插入第一个元素? [问题点数:20分,结帖人zsw19909001] JavaScript code   ? 1 2 3 4 5 <div id="contain" ...

  4. swift 注解 （和java比照）@attribute name

    Attributes provide more information about a declaration or type. There are two kinds of attributes i ...

  5. poj 2057 树形DP，数学期望

    题目链接:http://poj.org/problem?id=2057 题意:有一只蜗牛爬上树睡着之后从树上掉下来,发现后面的"房子"却丢在了树上面, 现在这只蜗牛要求寻找它的房子 ...

  6. 2月4号学习的一个SSM整合项目，第一课

    本文引自:https://github.com/Sunybyjava/seckill  原作者:sunybyjava@gmail.com seckill 一个整合SSM框架的高并发和商品秒杀项目,学习 ...

  7. P1217 [USACO1.5]回文质数 Prime Palindromes

    题目描述 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找出范围[a,b](5 <= a < b <= 100,000 ...

  8. 2017.11.23 利用Cookie管理实现自动登陆

    Cookie管理 Cookie对象是由服务器产生并保存在客户端的信息,常用他记录用户个人信息以及个性化设置.用户每次访问网点时,应用程序就可以检索以前保存的信息 Cookie对象属于的类是javax. ...

  9. HTTP 下载文件工具类

    ResponseUtils.java package javax.utils; import java.io.ByteArrayInputStream; import java.io.File; im ...

  10. express_webpack自动刷新

    现在,webpack可以说是最流行的模块加载器(module bundler).一方面,它为前端静态资源的组织和管理提供了相对较完善的解决方案,另一方面,它也很大程度上改变了前端开发的工作流程.在应用 ...