我们点击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. Maven 配置tomcat和findbug插件（在eclipse建立的项目中）

    tomcat插件 a)        tomcat的maven插件可以在tomcat的官网上寻找,这就是tomcat插件的plugin b)        将tomcat的plugin配置到项目的po ...

  2. div的隐藏占用空间位置关系

    display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,经过亲自实验,我发现使用 visibility:hidden属性会使对象不可见,但该对象 ...

  3. JS里的居民们7-对象和数组转换

    编码 学习通用的数据用不同的数据结构进行存储,以及相互的转换 对象转为数组: var scoreObject = { "Tony": { "Math": 95, ...

  4. MySQL查询(未完结)

    MySql查询 单表查询: 查询所有字段 SELECT * FROM 表名; '*' 代表所有字段 查询指定字段 SELECT 字段名1, 字段名2 FROM 表名; 按照指定条件查询记录 1. 查询 ...

  5. 原生JS,运动的小人

    今天突然想起来,不知道在什么网站上看的一个纯纯的原生JS写的效果,运动的小人,所以在这里给大家分享一下代码: 并说明:这不是本人写的,而是我在浏览网站是无意中发现的,现在已经不记得是哪个网站了,但是要 ...

  6. Ta们，用云计算改变着更多普通人的生活，所以，我们1218

    维族音乐的传承者:为家园建设生态农业:为50万货运司机谋福利:电视游戏行业复兴的倡导者:......还有很多平凡普通的人,不同的主角.不同的情节,用自己的云上轨迹在点滴改变着我们的周遭世界.所以,我们 ...

  7. Mac系统丢失管理员

    今天把osx变成平行用户,提示说要重启,但是一进来,我靠,自己的管理员用户变成了普通用户.我靠,有这么搞的嘛? 不能安装软件,不能https,不能保存密码,什么也不能做了. 网上一查,找到了几个解决方 ...

  8. .net通过代码发送邮件

    关键代码: 需要引用命名空间: using System.Net.Mail;using System.Net; MailMessage mailObj = new MailMessage(); mai ...

  9. 超详细Redis入门教程【转】

    这篇文章主要介绍了超强.超详细Redis入门教程,本文详细介绍了Redis数据库各个方面的知识,需要的朋友可以参考下   [本教程目录] 1.redis是什么 2.redis的作者何许人也 3.谁在使 ...

  10. eclipse中对Hadoop项目进行mvn clean install时报错的处理

    [ERROR] Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.5:clean (default-clean) ...