我们点击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. [Java反射基础二]获取类的信息

    本文接上文“Class类的使用”,以编写一个用来获取类的信息(成员函数.成员变量.构造函数)的工具类来讲解"反射之获取类的信息" 1.获取成员函数信息 /** * 获取成员函数信息 ...

  2. JQ中的FormData对象 ajax上传文件

    HTML代码: <form enctype="multipart/form-data" method="POST" name="searchfo ...

  3. 使用electron构建跨平台Node.js桌面应用

    最近,把团队内经常使用的一个基于Node.js制作的小工具给做成了可视化操作的桌面软件,使用的是electron,这里简单分享一下使用electron的一些经验和心得. 一.如何使用electron把 ...

  4. windows server 2008远程桌面最大连接数设置

    1. 运行gpedit.msc: 2. 选择计算机配置-->管理模板-->Windows组件-->远程桌面服务-->远程桌面会话主机-->连接: 3. 双击“限制连接的数 ...

  5. GTX650Ti，GT610安装黑苹果之经验与步骤

    安装这两个显卡的黑苹果都是10.9以上的版本,一个是10.9.2,一个是10.9.4,最后都完美.主板一个是Z77,一个是H61. 1. 开始安装完以后,显卡不工作,能够安全模式进去. 2. 删除Ap ...

  6. dialog problem overview

    一 Datasets 1. ubuntu chat corpus: http://daviduthus.org/UCC/2. dialogue  datasets (circa 2005) 二 Tas ...

  7. OLED中的Demura

    OLED作为一种电流型发光器件已越来越多地被应用于高性能显示中.由于它自发光的特性,与LCD相比,AMOLED具有高对比度.超轻薄.可弯曲等诸多优点.但是,亮度均匀性和残像仍然是它目前面临的两个主要难 ...

  8. nginx 应用包编译及常用文件配置

    1.zlib wget http://www.zlib.net/fossils/zlib-1.2.8.tar.gz 2.openssl wget http://www.openssl.org/sour ...

  9. Azure DocumentDB 正式发布

    DocumentDB 简介 一种 NoSQL JSON 数据库 Azure DocumentDB 提供完全托管的 NoSQL 数据库服务,高度可用,自动缩放,开发简易,可以加速并预测性能.它适合诸如 ...

  10. 【NLP_Stanford课堂】拼写校正

    在多种应用比如word中都有拼写检查和校正功能,具体步骤分为: 拼写错误检测 拼写错误校正: 自动校正:hte -> the 建议一个校正 建议多个校正 拼写错误类型: Non-word Err ...