在用户注册的时候，常常用户点击文字就需要将光标聚焦到对应的表单上面，这个是怎么实现的呢？就是下面我要介绍的<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. CentOS6下DHCP服务（一）工作原理及安装配置说明

    1.DHCP服务用途 DHCP是Dynamic Host Configuration Protocol的简写,DHCP服务器最主要的工作就是自动地将网络参数分配给网络中的每台计算机,让客户端的计算机在 ...

  2. 框架： namespace和use的区别以及使用注意项

    我们在使用框架的时候,总会使用到namespace和Use这两个东西,我们先来看它们存在的意义 namespace:是指我们当前类中,所在的位置.使用namespace关键字的话,我们就可以达到效果: ...

  3. Spring MVC框架下提交Date数据无法在controller直接接收

    主要有两步,controller中添加initBinder方法,再创建一个时间类型数据转换类就OK了. 1.在Controller中创建方法: // 相关包 import java.text.Date ...

  4. 安卓手机下载YouTube视频的3种方法

    作为全球最大的在线视频网站,YouTube上面的内容可真是应有尽有啊,从教学视频到个人手工艺品制作流程,从各种搞笑视频到电视连续集等等,包罗万象.如果你想下载YouTube视频到电脑上面的话,网上有很 ...

  5. leetcode: 树

    1. sum-root-to-leaf-numbers Given a binary tree containing digits from0-9only, each root-to-leaf pat ...

  6. 微信小程序加载本地图片方法

    目录结构如下,只要图片按正确的方式放入小程序的开发工具的项目中,即可在wxml文件中用内联样式或者image标签都可以引用本地的图片. 步骤一:微信开发工具 打开项目 步骤二:新建个文件夹(放项目的一 ...

  7. 使用node.js + socket.io + redis实现基本的聊天室场景

    在这篇文章Redis数据库及其基本操作中介绍了Redis及redis-cli的基本操作. 其中的publish-subscribe机制应用比较广泛, 那么接下来使用nodejs来实现该机制. 本文是对 ...

  8. paper-list

    1.yolo-v1,yolo-v2,yolo-v3 2.ssd,focal loss,dssd 3.fast-rcnn,faster-rcnn,r-fcn,Light-Head R-CNN,R-FCN ...

  9. Java-笔记1

    /* 对第一个java程序进行总结 1. java程序编写-编译-运行的过程 编写:我们将编写的java代码保存在以".java"结尾的源文件中 编译:使用javac.exe命令编 ...

  10. Django Reverse for 'artic_post' with arguments '()' and keyword arguments '{}' not found. 0 pattern(s) tried: []

    Reverse for 'home' with arguments '()' and keyword arguments '{}' not found. 0 pattern(s) tried: [] ...