The
has recently used label labels when doing things, and has a very strange problem because it used to be very rare to use label labels. What's the problem? Let's look at an effect
<textarea id= "Runcode1" > <! DOCTYPE html> <ptml> <pead> <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> </pead> <body> <div class= "title" > Label label problems encountered during use </div> <div class= "Login-item clearfix" > <label for= "username" > Username:</label> <input "text" type= "text" class= " Username "name=" username "/> <lable id=" J_usernameerror "></label> </div> <div class=" Login-item Clearfix "> <label for=" password "> Secret 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> </ptml> </textarea>
Tip: You can modify some of the code before running
This demo to achieve the goal is to click the Login button to verify the user entered the user name, password is legitimate, if not legitimate in the user name input box under the error message.
The element that prompts for the error message is scheduled to be implemented with the label.
Open the demo page by running code and click on the login button to see what happens. If you are using Firefox, Chrome or ie9+, clicking the login button prompts "username error", which is the desired result. If you're using IE6, 7, 8, how about a second look at what's going to change? This time the discovery page does not prompt the information, opens the developer tool, looks at the control this time to discover prompts the error message "SCRIPT600: Unknown run-time error". Encountered this problem when tried innertext and innerHTML two methods, found that will be reported such a mistake, that is the use of the method is not to go to the w3cschool above checked the discovery also did not say that does not support innertext and innerHTML.
Why in the IE6, 7, 8 prompted such errors and Firefox, Chrome, ie9+ (other browsers did not try) to run normally. Careful person may see the problem where, for the hint "username error" element start tag written "lable" instead of label. But I did not find this problem, has always thought that the label label using the way there are problems, as to why IE6, 7, 8 of the JS engine in the operation of the label name wrong elements of the innertext, innerHTML attribute error, and Firefox, Chrome and ie9+ are not wrong, not very clear, if you have a better understanding of the friend please explain it.
This problem is actually very low-level, put the label name wrong. But then I did not find, and then carefully studied a moment to find this problem, so still record.