下面是使用时发现的问题代码：
复制代码 代码示例:
<!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">密 码：</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>
备注：您可以先修改部分代码再运行
上面的例子目的是在点击登录按钮的时候校验用户输入的用户名、密码是否合法，如果不合法就在用户名输入框下面提示错误信息。 提示错误信息的元素计划用label实现。
运行代码，点击登录按钮，有啥变化。如果使用的是Firefox、Chrome或者IE9+，则点击登录按钮之后会提示 “用户名错误”，这是想要的结果。如果使用的是IE6, 7, 8再看看会有什么变化呢？发现页面没有提示出来信息，打开开发人员工具，看下控制这时候会发现提示出来错误信息“SCRIPT600: 未知的运行时错误 ”。遇到这个问题的时候尝试innerText和
inner HTML两种方法，发现都会报这样的错误，认为是使用方法不对去w3cschool上面查也没有说不支持innerText和innerHTML的。
怎么会在IE6, 7, 8提示这样的错误而Firefox, Chrome, IE9+（其他浏览器没有尝试）运行正常呢。研究发现对于提示“用户名错误”的元素开始标签写成了“lable”而不是label。当时没发现此问题，以为是label标签使用方式上出现了问题呢，对于为什么IE6, 7, 8的JS引擎会在操作这种把标签名写错的元素的innerText、innerHTMl属性时出现错误，而Firefox
、Chrome和IE9+没有出现错误，不清楚，如果有对这方面比较了解的朋友请解释下吧。
