Analysis and solutions to problems encountered during the use of label tags_HTML/Xhtml

Analysis and solutions to problems encountered during the use of label tags_HTML/Xhtml_Web page production

WBOY

Release： 2016-05-16 16:40:07

Original

1806 people have browsed it

I recently used label tags when making things. Since label tags were rarely used 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 learning 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>
<script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div>
<body>
<div class="title">
Problems encountered during the use of label labels
</div>
<div class="login-item clearfix">
<label for="username">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">Password  code:</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="Login" id="J_submitLogin" />
</div>
<script>
document.getElementById('J_submitLogin').onclick = function() {
var usernameError = document.getElementById('J_usernameError');
usernameError.innerHTML = 'Username error';
};
</script>
</body>
</html>

Tip: You can modify part of the code before running

The purpose of this demo is to verify the user when clicking the login button Check whether the entered user name and password are legal. If not, an error message will be displayed below 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, click the login button, and see what happens. 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 can you check if there are any changes? At this time, you find that no information is prompted on the page. Open the developer tools and look at the controls. At this time, you will find that the error message "SCRIPT600: Unknown runtime error" is prompted. When I encountered this problem, I tried two methods, innerText and innerHTML, and found that errors like this were reported. I thought it was the wrong way to use it. I checked it on w3cschool and found that it didn't say that innerText and innerHTML are not supported.

Why is it that such an error is prompted in IE6, 7, and 8 but Firefox, Chrome, and IE9 (other browsers have not been tried) run normally. Careful people may immediately see where the problem lies. For the element that prompts "wrong user name", the start tag is written as "lable" instead of label. But I didn't notice this problem at the time. I always thought it was a problem with the way the label label was used. As for why the JS engine of IE6, 7, and 8 would operate the innerText and innerHTMl attributes of elements with wrong label names. An error occurs, but there is no error in Firefox, Chrome and IE9. It is not very clear. If there are friends who know more about this, please explain it.
This problem is actually quite low-level. I wrote the label name wrong. But I didn't notice it at the time. I later discovered this problem after careful study, so I decided to record it.