Analysis and solution ideas for problems encountered during the use of label tags

Author：Eve Cole Update Time：2025-06-10 03:00:03

Recently, I used the label tag when I was doing things. Since I rarely used label tags before, I encountered a very strange problem. What's the problem? Here is a look at an effect

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML label tag Learn 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> Problems encountered during the use of label tag</div> <div> <label for="username">Username: </label> <input type="text" id="username" name="username" /> <lable id="J_usernameError"></label> </div> <div> <label for="password">Secret Code: </label> <input type="text" id="password" name="username" /> <label id="J_passwordError"></label> </div> <div> <input type="submit" value="Login" id="J_submitLogin" /> </div> <script> document.getElementById('J_submitLogin').onclick = function() { var usernameError = document.getElementById('J_usernameError'); usernameError.innerHTML = 'UsernameError'; }; </script> </body> </html>

The purpose of this demo is to verify whether the user name and password entered by the user are legal when clicking the login button. If it is not legal, the error message will be prompted under the user name input box.

The element that prompts the error message is planned to be implemented using label.

Open the demo page by running the code and click the login button to see what changes will happen. If you are using Firefox, Chrome or IE9+, clicking the login button will prompt that the user name is wrong, which is the desired result. If I use IE6, 7, 8, how can I see what changes will happen? At this time, I found that the page did not prompt information. Open the developer tool and look at the control. At this time, I will find that the prompt error message SCRIPT600: Unknown runtime error. When I encountered this problem, I tried both innerText and innerHTML methods, and found that they would report such an error. I thought the usage method was wrong and went to w3cschool to check it out and found that it did not support innerText and innerHTML.

Why does this error prompt in IE6, 7, 8 while Firefox, Chrome, IE9+ (other browsers have not tried) run normally. Careful people may see the problem at once. For elements that prompt the username error, the label starts to be written as a lable instead of a label. But I didn't find this problem at that time. I always thought there was a problem in the usage of label tags. As for why the JS engines of IE6, 7, 8 will have errors when operating the innerText and innerHTMl properties of elements with the wrong label name, while there are no errors in Firefox, Chrome and IE9+. It's not very clear. If you have a good understanding of this, please explain.

This question is actually quite low-level, you have written the label name incorrectly. But I didn't notice it at that time. Later, after careful study, I discovered this problem, so I'll record it.