我们点击QQ注册页面，发现了一个问题，当我们点击密码两个字的时候，输入框聚焦了，而点击确认密码的时候，输入框也聚焦了，而我们上节课做的页面，这么点击，并不聚焦

1.默认情况下文字和输入框是没有关联关系的

也就是说点击文字输入框是不会聚焦，如果想点击文字时让对应输入框聚焦，那么就需要让给你文字和输入框绑定

2.要想让输入框和文字绑定在一起，那么我们可以使用label标签

3.绑定格式：

3.1将文字利用label标签包裹起来

3.2给输入框添加一个id属性

3.3在label标签中通过for属性和输入框的id进行绑定即可

还有另外一个简单的方法可以实现：

将账号这一整个输入框包裹起来，但是这种方法有局限性

          

如果我们想做一个点击“账号”聚焦在“密码”输入框上，点击“密码”聚焦在“账号”输入框上

课时46.label标签（掌握）的更多相关文章

  1. 微信小程序组件解读和分析：十一、label标签

    label标签组件说明: label标签,与html的label标签基本一样.label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发 ...

  2. WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

    一．前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本 ...

  3. HTML label标签的一点理解

    label标签为input元素定义标注. label元素不呈现任何特殊效果.不过他为鼠标用户改进了可用性.如果你在label元素内点击文本就会触发此控件.就是说当用户选择该标签是,浏览器就会自动的将焦 ...

  4. HTML <label> 标签

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

  5. label标签使用过程中遇到的问题

    最近在做东西时候使用到了label标签,由于之前很少使用label标签,所以就遇到一个很奇怪的问题.什么问题呢?下面来看一个效果 <!DOCTYPE html> <html> ...

  6. [Cocos2D-x For WP8]Label标签

    Label标签主要会用于在游戏中显示一些文字字符串类型的信息.那么在Cocos2D-x里面主要会有下面的一些创建标签的方式: 1.使用CCLabelTTF类生成系统文字的标签,编程语法如下: CCLa ...

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

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

  8. label标签跳出循环

    出场: 首先我们来说说为什么需要label标签,虽然我们已经知道有break,continue跳出循环,但如果是多重循环那么它们就显的无能为力了,所以就出现了label这个标签来为我们服务. 我们先来 ...

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

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

随机推荐

  1. python--boto3 之 与dynamoDB 的基本交互，表的备份与恢复

    最近因工作需要,研究了一下boto3中dynamoDB部分,略有心得,在此总结一下. 首先是boto3的安装,在装有python和pip的机器上,运行 sudo pip install boto3 官 ...

  2. centos7编译安装git最新版

    假如系统已经安装了git,先删除. 如果是通过yum安装的,直接在终端使用以下指令删除: yum remove git 如果是通过源码编译安装的,参考以下文章: Linux ./configure & ...

  3. MySQL--localhost、局域网、外网访问MySQL

    安装环境: MySQL版本:mysql-installer-community-5.7.22.1.msi,64位 计算机:Windows7旗舰版,64位 本机的局域网IP为:192.168.2.230 ...

  4. Fastdfs 部署干货

    tracker server and client:192.168.1.42 storage server:192.168.1.46 storage server:192.168.1.53 安装: 安 ...

  5. python nose测试

    前提: python3 安装nose 结果: nose目录下有子目录tests和mybag,在mybag下新建my_age.py, 内部有Students类,age属性. tests目录下写Sutde ...

  6. M-wordL-图

    典型的需要使用图模型 将start 和 end 以及字典一同构建成图,然后探究从start到end的最短路径

  7. https填坑之旅

    Boss说,我们买了个权威证书,不如做全站式的https吧,让用户打开主页就能看到受信任的绿标.于是我们就开始了填坑之旅. [只上主域好不好?] 不好...console会报出一大堆warning因为 ...

  8. 如何给Docker hub用户上传头像

    我第一次使用Docker hub时,觉得很奇怪,这个网站上面没有允许用户上传头像的地方. 后来经过研究才发现,需要用在Docker hub上注册用户的同一个邮箱到Gravatar这个网站上再注册一个账 ...

  9. jmeter测试mysql性能

    1.下载jdbc.将jdbc解压,将mysql-connector-java-version-ga-bin.jar这个文件copy到jmeter/lib下 2.打开jmeter,设置jdbc请求. 1 ...

  10. ThinkPHP最新版本SQL注入漏洞

    如下controller即可触发SQL注入: code 区域 public function test() { $uname = I('get.uname'); $u = M('user')-> ...