Analysis and solutions to problems encountered in the use of label tags

I used the label tag when I was doing something recently. Since I rarely used the label tag before, I encountered a very strange problem. What's the problem? Let's take a look at an effect

<!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>

Tip: You can modify some of the code before running

The purpose of this demo is to verify whether the username and password entered by the user are legal when the login button is clicked. If they are not legal, an error message will be prompted below the username input box.
The elements that prompt error information are planned to be implemented using labels.

Open the demo page by running the code and click the login button to see what changes will occur. If you are using Firefox, Chrome, or IE9+, after clicking the login button, you will be prompted with "Wrong Username", which is the desired result. If you are using IE6, 7, or 8, how about checking out what changes will occur? At this time, you will find that the page does not prompt any information. Open the developer tools and look at the control. At this time, you will find that the error message "SCRIPT600: unknown runtime error" is prompted. When I encountered this problem, I tried both innerText and innerHTML methods, and found that both methods reported the same error. I thought that the usage was wrong, so I checked on w3cschool and found that it did not say that innerText and innerHTML were not supported.

Why does this error appear in IE6, 7, and 8 while Firefox, Chrome, and IE9+ (other browsers have not been tried) run normally? Careful people may be able to see the problem at once. The starting tag of the element that prompts "Wrong Username" is written as "lable" instead of label. But I didn't notice this problem at the time. I always thought there was a problem with the way the label tag was used. As for why the JS engines of IE6, 7, and 8 would have errors when operating the innerText and innerHTMl attributes of such elements with incorrect tag names, while Firefox, Chrome, and IE9+ did not have errors, I am not very clear. If anyone who knows more about this, please explain it to me.

This problem is actually quite low-level, the label name was written incorrectly. But I didn't notice it at the time. I only discovered this problem after careful study later, so I still recorded it.

<<: Detailed process of Vue front-end packaging

>>: Sharing ideas on processing tens of millions of data in a single MySQL table

A preliminary understanding of CSS custom properties

Analysis and solutions to problems encountered in the use of label tags

A preliminary understanding of CSS custom properties

Explanation of the working principle and usage of redux

Detailed deployment of Alibaba Cloud Server (graphic tutorial)

JavaScript canvas to achieve mirror image effect

How to introduce scss into react project

MySQL5.7 parallel replication principle and implementation

javascript to switch pictures by clicking a button

Comparison of 5 CSS scrolling ceiling implementation methods (performance upgrade version)

Detailed explanation of the idea of implementing dynamic effect of lyrics progress text color filling change using CSS3

MySQL permissions and database design case study

Recommend

A brief analysis of Linux network programming functions

Solution to the problem that the text is on the lower left and cannot be resized when the textarea is laid out

Solution to the conflict between Linux kernel and SVN versions

Practice of using Tinymce rich text to customize toolbar buttons in Vue

Detailed explanation of MYSQL stored procedure comments

Markup language - for

How to write beautiful HTML code

JavaScript to achieve simple drag effect

How to migrate the data directory in Docker

MySQL high availability solution MMM (MySQL multi-master replication manager)

Several implementation methods and advantages and disadvantages of SQL paging query in MySQL

Solution to the low writing efficiency of AIX mounted NFS

3 functions of toString method in js

A brief discussion on Flink's fault-tolerant mechanism: job execution and daemon

How to successfully retrieve VMware Esxi root password after forgetting it