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

Example code for implementing background blur effect with CSS

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

Example code for implementing background blur effect with CSS

How to upgrade all Python libraries in Ubuntu 18.04 at once

More Features of the JavaScript Console

Why MySQL can ignore time zone issues when using timestamp?

Detailed explanation of the interaction between React Native and IOS

A brief discussion on size units in CSS

Records of using ssh commands on Windows 8

5 ways to determine whether an object is an empty object in JS

Tutorial on installing lamp-php7.0 in Centos7.4 environment

Sample code for deploying Spring-boot project with Docker

Recommend

Detailed process of installing Jenkins-2.249.3-1.1 with Docker

Installation method of mysql-8.0.17-winx64 under windows 10

MySQL password modification example detailed explanation

Explore how an LED can get you started with the Linux kernel

Win7 installation MySQL 5.6 tutorial diagram

Vue el-date-picker dynamic limit time range case detailed explanation

Introduction to adding new users to MySql, creating databases for users, and assigning permissions to users

Multiple methods to modify MySQL root password (recommended)

Detailed explanation of referential integrity in SQL (one-to-one, one-to-many, many-to-many)

How to query whether the mysql table is locked

Writing tab effects with JS

What does mysql database do

Detailed explanation of Vue's SSR server-side rendering example

Detailed explanation of using Alibaba Cloud image repository to build foreign Docker images