最近在做东西时候使用到了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. Selenium+Python的环境配置

    因为项目的原因,最近较多的使用了UFT来进行自动化测试工作,半年没有使用Selenium了,于是在自己的电脑上重新配置了基于python3.x的selenium环境,配置过程大致如下: 1. Sele ...

  2. ubuntu下code::blocks+opengl的使用与配置

    操作系统:Ubuntu 15.04 gcc version 4.9.2 opengl安装 sudo apt-get install build-essential libgl1-mesa-dev li ...

  3. STM32 Cube固件库编程之新建工程

    Cube固件库是ST现在主推的固件库,并且在它的官网已经找不到原来的标准库可供下载.Cube固件库的构架图如下 这种新式构架可以有效的加快软件工程师的工程进度. 新建一个工程项目主要包括以下的步骤: ...

  4. C语言程序设计第12次作业

    一.本次课主要内容: 本章主要介绍指针相关的基础知识,本节课的主要如下 (1)通过示例"电码加密"引入字符指针与字符串处理.首先重点介绍字符指针和字符串的关联和区别,然后对常用字符 ...

  5. Ubuntu 14.10 创建虚拟网卡实现桥接网络

    目标需求:在Ubuntu主机创建一张虚拟网卡,使得搭建在VirtualBox中的其他主机能借助虚拟网卡构建的局域网进行相互间的通讯 步骤一:准备工具包 安装 uml-utilities 以及 brid ...

  6. Cordova学习（一） 环境搭建

    一.什么是cordova Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等. Cordova还提供了一组统一的Java ...

  7. Unity Ugui射线坐标转换总结

    世界空间中的点坐标转换到屏幕坐标: screenPos = RectTransformUtility.WorldToScreenPoint(cam, worldPos.transform.positi ...

  8. 接口或者http请求测试工具--chrome plug

    Postman : With Postman, you can construct simple as well as complex requests quickly, save them for ...

  9. NSIS 让程序以管理权限运行

    用NSIS向导,制作安装包,会生成NSI扩展的脚本文件,按F9,即可以生成安装文件. 如果要以管理员权限运行,直接在nsi脚本中,添加RequestExecutionLevel admin Name ...

  10. Servlet向客户端发送中文数据的编码情况

    (更多内容请关注本人微信订阅号:it_pupil) 本文讲述服务端servlet向客户端浏览器发送中文数据的编码情况,需要抓住下面几点: 输出流发送数据,必须是以字节形式传输的.也就是说,如果你在服务 ...