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
CSS positioning layout (position, positioning layout skills)
1. What is positioning? The position attribute in...
Getting Started Tutorial on GDB in Linux
Preface gdb is a very useful debugging tool under...
Detailed explanation of Vue3's responsive principle
Table of contents Review of Vue2 responsive princ...
Detailed explanation of the implementation of nginx process lock
Table of contents 1. The role of nginx process lo...
Blog Design Web Design Debut
The first web page I designed is as follows: I ha...
Implementation of Vue 3.x project based on Vite2.x
Creating a Vue 3.x Project npm init @vitejs/app m...
Detailed explanation of the solution for CSS-opacity child elements to inherit the transparency of parent elements
In the process of writing the project page, I enc...
The use of mysql unique key in query and related issues
1. Create table statement: CREATE TABLE `employee...
Solve the problem of MySQL 8.0 still prompting Access denied even though the input is correct
I started learning MySQL recently. The installati...
MySQL commonly used SQL and commands from entry to deleting database and running away
Table of contents Start and stop Database related...
Detailed explanation of building a continuous integration cluster service based on docker-swarm
Preface This article is just a simple record of m...
Summary of MySQL database like statement wildcard fuzzy query
MySQL error: Parameter index out of range (1 >...
Detailed explanation of count without filter conditions in MySQL
count(*) accomplish 1. MyISAM: Stores the total n...
Nginx proxy axios request and precautions
Preface I recently wrote a small demo. Because I ...
How to directly reference vue and element-ui in html
The code looks like this: <!DOCTYPE html> &...