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 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
Recommend
nginx proxy_cache batch cache clearing script introduction
Preface: I used the official nginx proxy_cache as...
The vue project realizes drawing a watermark in a certain area
This article shares with you how to use Vue to dr...
Detailed explanation of the correct way to open em in CSS
Why do we say “usually 1em=16px”? The default tex...
Common functions of MySQL basics
Table of contents 1. Common function classificati...
Five ways to traverse objects in javascript Example code
Table of contents Prepare Five weapons for…in Obj...
React tsx generates random verification code
React tsx generates a random verification code fo...
Does Mysql ALTER TABLE lock the table when adding fields?
Table of contents Before MySQL 5.6 After MySQL 5....
Use pure CSS to achieve switch effect
First is the idea We use the <input type="...
The benefits of div+css and web standard pages
The div element is used to provide structure and b...
In-depth explanation of MySql table, database, sharding and partitioning knowledge
1. Introduction When the amount of data in the da...
Some tips on speeding up the development of WeChat mini-programs
1. Create a page using app.json According to our ...
Detailed explanation of nmcli usage in CentOS8
Common nmcli commands based on RHEL8/CentOS8 # Vi...
Classification of web page color properties
Classification of color properties Any color can ...
HTML drawing user registration page
This article shares the specific implementation c...
Hover zoom effect made with CSS3
Result:Implementation code: html <link href=&#...