最近在做东西时候使用到了label标签，由于之前很少使用label标签，所以就遇到一个很奇怪的问题。什么问题呢？下面来看一个效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML label tag 学习 by Typeof</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
.title {
margin: 10px;
}
.login-item, .login-button {
margin: 20px;
height: 30px;
}
.clearfix {
clear: both;
content: "";
display: block;
}
.login-item label {
float: left;
width: 70px;
}
.login-item .text {
height: 18px;
width: 200px;
float: left;
}
</style>
</head>
<body>
<div class="title">
label标签使用过程中遇到的问题
</div>
<div class="login-item clearfix">
<label for="username">用户名：</label>
<input type="text" class="text" id="username" name="username" />
<lable id="J_usernameError"></label>
</div>
<div class="login-item clearfix">
<label for="password">密&nbsp;&nbsp;码：</label>
<input type="text" class="text" id="password" name="username" />
<label id="J_passwordError"></label>
</div>
<div class="login-button clearfix">
<input type="submit" value="登录" id="J_submitLogin" />
</div>
<script>
document.getElementById('J_submitLogin').onclick = function() {
var usernameError = document.getElementById('J_usernameError');
usernameError.innerHTML = '用户名错误';
};
</script>
</body>
</html>

　　这个demo要实现的目的是在点击登录按钮的时候校验用户输入的用户名、密码是否合法，如果不合法就在用户名输入框下面提示错误信息。
提示错误信息的元素计划用label实现。
　　通过运行代码打开demo页面，点击登录按钮，看会有什么变化。如果使用的是Firefox、Chrome或者IE9+，则点击登录按钮之后会提示
“用户名错误”，这是想要的结果。如果使用的是IE6, 7, 8如何一个再看看会有什么变化呢？这时候发现页面没有提示出来信息，
打开开发人员工具，看下控制这时候会发现提示出来错误信息“SCRIPT600: 未知的运行时错误 ”。遇到这个问题的时候尝试了innerText和innerHTML
两种方法，发现都会报这样的错误，以为是使用方法不对去w3cschool上面查了下发现也没有说不支持innerText和innerHTML的。
　　到底为什么会在IE6, 7, 8提示这样的错误而Firefox, Chrome, IE9+（其他浏览器没有尝试）运行正常呢。细心的人可能一下就看出问题在哪里了，
对于提示“用户名错误”的元素开始标签写成了“lable”而不是label。但是我当时就没有发现这问题，一直以为是label标签使用方式上出现了问题呢，至于
为什么IE6, 7, 8的JS引擎会在操作这种把标签名写错的元素的innerText、innerHTMl属性时出现错误，而Firefox、Chrome和IE9+没有出现错误，
不是很清楚，如果有对这方面比较了解的朋友请解释下吧。
　　这个问题其实挺低级的，把标签名写错了嘛。但是当时自己就没有发现，后来仔细研究了一下才发现这个问题，所以还是记录一下。
 

label标签使用过程中遇到的问题的更多相关文章

  1. 在学习HTML——form表单中的label标签时的一点小体会

    在我啃了一遍书本之后,开始了在慕课看视频的过程,从最开始的HTML+CSS的基础课程看起,在第5-9小节讲到了form表单的label标签, 首先看一下慕课的讲解:  label 标签不会向用户呈现任 ...

  2. HTML中Div、span、label标签的区别

    div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...

  3. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  4. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  5. 说说HTML5中label标签的可访问性问题——张鑫旭

    一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...

  6. a标签中的label在IE下触发不了a标签的href链接（label标签——解析）

    <a href="http://www.baidu.com/" target="_blank"> <span>百度</span&g ...

  7. 2017-3-2 C# WindowsForm 中label标签居中显示

    有时候label标签要输出 label.text=""; 的语句,那么要把这个语句居中显示 1.要取消他的Autosize的值 2.拉大这个框,设置里面的文本的TextAlign ...

  8. React中 checkbox 与 label 标签的搭配

    用<label>标签替代checkbox的点击样子,点击<label>实际上就是点击checkbox checkbox的checked值会跟着一起变 <input typ ...

  9. react中label标签的作用

    当我们点击输入内容触发input焦点的时候,就需要使用到label标签里的htmlFor属性来扩大点击的区域 代码如下:

随机推荐

  1. hibernate开发(1)

    1 什么是ORM OR-mapping 是 object relational mapping 对象关系映射,是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.解决了不同数据库s ...

  2. NAT123内网映射端口

    在无内网路由管理员权限的情况下,需要将内网web应用暴露到公网访问,此时需要用到花生壳或者nat123(两个应用都不是免费的,其中花生壳可以8元认证,以后免费使用,nat123按天收费) 花生壳 ht ...

  3. Codeforces Round #323 (Div. 1) A. GCD Table

    A. GCD Table time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  4. sphinx,coreseek安装

    sphinx是国外的一款搜索软件. coreseek是在sphinx的基础上,增加了中文分词功能,换句话说,就是支持了中文. Coreseek发布了3.2.14版本和4.1版本,其中的3.2.14版本 ...

  5. ruby on rails 安装

    第一种方案: 1. 下载ruby    Ruby21-x64 2. 1 gem sources --remove http://rubygems.org 2. 2 gem sources -a htt ...

  6. Quartz Core框架之CALayer

    1.继承链:NSObject 2.创建一个layer (1)+ (instancetype)layer :创建和返回一个layer实例对象 (2)- (instancetype)init :返回一个初 ...

  7. MFC绘图（转载）

    http://www.cppblog.com/bestcln/articles/83189.html 1 几何对象的结构和类 为了使用绘图函数,应该先了解绘图所用到的几种表示几何对象的结构和类.这些结 ...

  8. JAVA代理模式与动态代理模式

    1.代理模式 所谓代理,就是一个人或者一个机构代表另一个人或者另一个机构采取行动.在一些情况下,一个客户不想或者不能够直接引用一个对象,而代理对象可以在客户端和目标对象之前起到中介的作用.代理模式给某 ...

  9. linux tar 解压文件时指定文件名

      linux解压文件时指定文件夹名称   wget -O mysql-5.6.15.tar.gz  http://oss.aliyuncs.com/aliyunecs/onekey/mysql/my ...

  10. DotNetBar中collapsibleSplitContainer的问题

    如果有两个collapsibleSplitContainer,并且将splitwidth都设置为1,则只有第一个起作用,如,窗体设计中的图是: 而执行的图是: 解决办法:在窗体load里手动将第二个c ...