在用户注册的时候，常常用户点击文字就需要将光标聚焦到对应的表单上面，这个是怎么实现的呢？就是下面我要介绍的<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. day003-List类、Set类

    (一) 知识回顾1. day002总结 泛型没有多态.如果泛型能实现多态,那么数据类型就不安全了.违背了设计泛型的初衷. 1.1 伪泛型 泛型只存在编译器,编译生成的字节码中,不存在泛型变量的. 1. ...

  2. 使用mongoDB时错误解决

    接触mongodb遇到的错误,记录下来,后续遇到问题,会持续更新 为了让mongodb更直观,在windows使用了NoSQL Manager for MongoDB作为连接工具 1.在连接数据库时遇 ...

  3. （原创）北美信用卡(Credit Card)个人使用心得与总结（个人理财版） [精华]

    http://forum.chasedream.com/thread-766972-1-1.html 本人2010年 8月F1 二度来美,现在credit score 在724-728之间浮动,最高的 ...

  4. Open Data for Deep Learning

    Open Data for Deep Learning Here you’ll find an organized list of interesting, high-quality datasets ...

  5. Makedown语法说明

    Markdown 语法说明 (简体中文版) / (点击查看快速入门) 概述 宗旨 兼容 HTML 特殊字符自动转换 区块元素 段落和换行 标题 区块引用 列表 代码区块 分隔线 区段元素 链接 强调 ...

  6. 模仿ArcGIS用Graphics重绘的直方图分级调节器

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  7. SQL的注入式攻击方式和避免方法

    SQL 注入是一种攻击方式,在这种攻击方式中,恶意代码被插入到字符串中,然后将该字符串传递到 SQL Server 的实例以进行分析和执行.任何构成 SQL 语句的过程都应进行注入漏洞检查,因为 SQ ...

  8. POJ-2155 Matrix---二维树状数组+区域更新单点查询

    题目链接: https://vjudge.net/problem/POJ-2155 题目大意: 给一个n*n的01矩阵,然后有两种操作(m次)C x1 y1 x2 y2是把这个小矩形内所有数字异或一遍 ...

  9. 8086汇编语言入门-HelloWorld

    附件下载:  http://pan.baidu.com/s/1i5R9qO9    密码:rfgk 80x86微处理器汇编语言编程.学习任何编程语言都免不了要跨越HelloWorld这道坎,面向机器的 ...

  10. Codeforces 758A Holiday Of Equality

    题目链接:http://codeforces.com/problemset/problem/758/A A. Holiday Of Equality time limit per test 1 sec ...