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

    Markdown快速上手指南 1.Markdown介绍 markdown可以实现快速html文档编辑,格式优没,并且不需要使用html元素. markdown采用普通文本的形式,例如读书笔记等易于使用 ...

  2. Python中的Numpy、SciPy、MatPlotLib安装与配置

    Python安装完Numpy,SciPy和MatplotLib后,可以成为非常犀利的科研利器.网上关于这三个库的安装都写得非常不错,但是大部分人遇到的问题并不是如何安装,而是安装好后因为配置不当,在使 ...

  3. ubuntu linux 使用命令行安装 google chrome

    原帖地址: https://www.cyberciti.biz/faq/how-to-install-google-chrome-in-ubuntu-linux-12-xx-13-xx/ $ wget ...

  4. 257. Binary Tree Paths (dfs recurive & stack)

    Given a binary tree, return all root-to-leaf paths. Note: A leaf is a node with no children. Example ...

  5. hdu-2609 How many---最小表示法模板+set判重

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2609 题目大意: 有n个有01组成的字符串,每个字符串都代表一个项链,那么该字符串就是一个环状的结构 ...

  6. Google搜索引擎使用小技巧

    相信大家都知道,利用Google等搜索引擎进行信息查证是翻译过程中十分重要的一环.事实上,掌握信息搜索的技巧和方法,不仅对翻译工作大有帮助, 在网络信息时代,学会充分利用搜索引擎,在很多情况下都可以达 ...

  7. Linux 初学者：移动文件

    你学习了有关目录和访问目录的权限是如何工作的.你在这些文章中学习的大多数内容都可应用于文件 -- Paul Brown 在之前的该系列的部分中, 你学习了有关目录 和 访问目录 的权限 是如何工作的. ...

  8. 2017.10.26 JavaWeb----第五章 JavaBean技术

    JavaWeb----第五章 JavaBean技术 (1)JavaBean技术 JavaBean技术是javaweb程序的重要组成部分,是一个可重复使用的软件组件,是用Java语言编写的.遵循一定的标 ...

  9. removing vmware debugger from visual studio

    removing vmware debugger from visual studio by Ross on 十月 14, 2010 at 5:30 下午 under Visual Studio |  ...

  10. NodeJS中常见异步接口定义（get、post、jsonp）

    越来越多的人在使用nodeJS,作为一门服务端语言,我们不可避免的要写异步接口(ajax和jsonp).再次强调ajax和jsonp是两个概念,但是由于jquery的封装,使这两种异步接口的调用方式, ...