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

    wget https://github.com/gearman/gearmand/releases/download/1.1.15/gearmand-1.1.15.tar.gz -O /root/rp ...

  2. php的yii框架开发总结10

    1.CActiveForm是Chtml类的封装,但是它有数据验证的功能,有三种方式:服务器端.客户端.Ajax数据验证. 服务器端验证:当整个表单页面被提交后,在服务器端 进行验证.如果存在任何验证错 ...

  3. 自定义 Firefox TLS支持版本s

    如果目前正在运行火狐26,你可能已经注意到,浏览器仅支持SSL 3.0和TLS 1.0,默认不开启TLS 1.1或TLS 1.2.另外我们知道Firefox 27 已经实现了对TLS 1.2的支持. ...

  4. April 24 2017 Week 17 Monday

    Much effort, much prosperity. 越努力,越幸运. I have ever seen this sentence in many people's signature of ...

  5. 141. Linked List Cycle (amazon)

    Given a linked list, determine if it has a cycle in it. Follow up:Can you solve it without using ext ...

  6. 【CCPC-Wannafly Winter Camp Day3 (Div1) F】小清新数论（莫比乌斯反演+杜教筛）

    点此看题面 大致题意: 让你求出\(\sum_{i=1}^n\sum_{j=1}^n\mu(gcd(i,j))\). 莫比乌斯反演 这种题目,一看就是莫比乌斯反演啊!(连莫比乌斯函数都有) 关于莫比乌 ...

  7. printf、sprintf与fprintf 的用法区分

    原文链接 1: fprintf()#include <stdio.h> int fprintf( FILE *stream, const char *format, ... );fprin ...

  8. 第27章 LTDC/DMA2D—液晶显示—零死角玩转STM32-F429系列

    第27章     LTDC/DMA2D—液晶显示 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.co ...

  9. Java面试不得不知的问题（一）

    程序员面试   1. 面向对象的特征有哪些方面  ·   抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分, ...

  10. RDVTabBarController--可自由定制的iOS底部导航控件

    RDVTabBarController:一个十分完善的tabBarController,可以自定义角标个数,爽的停不下来. RDVTabBarController地址:RDVTabBarControl ...