最近在做东西时候使用到了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. web 乱码摘抄

    JavaWeb--中文乱码小结 JavaWeb--中文乱码小结 0.纯粹html乱码: 换个editor吧(有时候notepad都比sublime_text好用),最好是在<head>&l ...

  2. cookie 保存上次访问url方法

    if (Session[Enums.UserInfoSeesion] == null) { HttpCookie cookie = Request.Cookies[Enums.UserLastAcce ...

  3. 《java集合概述》

    JAVA集合概述: Collection: |---List有序的:通过索引就可以精确的操作集合中的元素.元素是可以重复的. List提供了增删改查的动作. 增加add(element) add(in ...

  4. UITableView去掉section的header的粘性

    思路:若header的高度为25,在滑动的时候将scrollView的内容偏移量上衣25,其实他还是粘在上面只不过我们看不到他了. ///---用于判断往上滑还是往下滑 var deltaY:CGFl ...

  5. C++ Daily 《5》----虚函数表的共享问题

    问题: 包含一个以上虚函数的 class B, 它所定义的 对象是否共用一个虚函数表? 分析: 由于含有虚函数,因此对象内存包含了一个指向虚函数表的指针,但是这个指针指向的是同一个虚函数表吗? 实验如 ...

  6. css 修改滚动条

    ::-webkit-scrollbar { width: 10px;}::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgb ...

  7. 深入理解css系列：meta标签

    积累太少,时间管理技巧欠缺,所以导致了博客更新的速度迟缓.学习中成长,成长中学习.加油吧!最近在做h5的项目,对于meta标签层出不穷的各式属性值有点头晕,所以查资料整理了下. 关键字:meta na ...

  8. 十个最适合 Web 和 APP 开发的 NodeJS 框架

    在浏览器以外运行 JavaScript 对于 JavaScript 爱好者来说非常神奇,同时也肯定是 web 应用程序开发界最受欢迎的进步之一.全球各地的开发者张开双臂拥抱 NodeJS. 对于新手来 ...

  9. iOS—图片编辑,文字下落动画的Demo

    仿照Mac上的截图编辑功能做的一个图片编辑的Demo,功能有画矩形,圆形,箭头,手写,输入文字和分享. 做的时候看到一个大神的帖子写的一个文字动画的教程,故顺带学习做了一个类似的文字下落动画. 有兴趣 ...

  10. 09——绝不在构造和析构函数中调用virtual函数

    在base class构造期间,virtual函数不是virtual函数. 构造函数.析构函数中不要调用virtual函数.