我们点击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. ECMA6所有知识点大概笔记

    ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现 初学者一开始学习JavaScript,其实就是在学3.0版的语法. -------------------- ...

  2. 第8章 CSS3中的变形与动画（上）

    变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时 ...

  3. JS判断请求来自Android手机还是iPhone手机

    <script type="text/javascript"> var browser = { versions: function () { var u = navi ...

  4. 1023 GPA计算

    1023 GPA计算  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 青铜 Bronze 题解  查看运行结果     题目描述 Description 小松终于步入了大学的殿 ...

  5. iview框架modal中嵌套modal

    modal的使用是平级的,后面的会覆盖前面,如下<modal>111</modal><modal>222</modal>内容为222的弹框会在内容为11 ...

  6. linux父子进程问题

    今天遇到一个linux进程启动时指定Max open files不对的问题,导致程序建立socket异常,进而导致fullgc问题,影响正常服务.所以顺带又温习了下linux下的父子进程的特性. 孤儿 ...

  7. c windows控制台输出颜色文字

    #include <windows.h> //设置文字颜色void SetColor(int ForgC){ WORD wColor; //We will need this handle ...

  8. C++ 友元（系转载多人博客，添加个人见解）

    原文地址:http://blog.csdn.net/caroline_wendy/article/details/16916441 原文地址:http://www.cnblogs.com/CBDoct ...

  9. MySQL5.7的组提交与并行复制

    从MySQL5.5版本以后,开始引入并行复制的机制,是MySQL的一个非常重要的特性. MySQL5.6开始支持以schema为维度的并行复制,即如果binlog row event操作的是不同的sc ...

  10. 【Leetcode】【Medium】Best Time to Buy and Sell Stock

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...