Analisis dan ide solusi untuk masalah yang dihadapi selama penggunaan tag label

Penulis：Eve Cole Waktu Pembaruan：2025-06-10 03:00:03

Baru -baru ini, saya menggunakan label label ketika saya melakukan sesuatu. Karena saya jarang menggunakan tag label sebelumnya, saya mengalami masalah yang sangat aneh. Apa masalahnya? Inilah efeknya

<! Doctype html> <html> <head> <meta charset = "utf-8"/> <itement> tag label html belajar dengan tipeof </title> <style type = "text/css"> html, body {margin: 0; Padding: 0; } .title {margin: 10px; } .login-item, .login-button {margin: 20px; Tinggi: 30px; } .clearfix {clear: keduanya; isi: ""; Tampilan: Blok; } .login-item label {float: left; Lebar: 70px; } .login-item .text {height: 18px; Lebar: 200px; float: kiri; } </style> </head> <body> <div> Problems encountered during the use of label tag</div> <div> <label for="username">Username: </label> <input type="text" id="username" name="username" /> <lable id="J_usernameError"></label> </div> <div> <label for="password">Secret Code: </label> <input type = "text" id = "password" name = "username"/> <label id = "j_passworderror"> </label> </div> <ver> <input type = "kirim" value = "login" id = "J_SubMitlogin"/> </div> <cript> Document.getelementById ('JICK = JICK = JICK/ONCLOGIN "/> </Div> <cript> document.getelementById (' JICK = JICK = JICK = JICK = JICLOB/ONCLOGIN". usernameerror = document.geteLementById ('j_usernameerror'); usernameerror.innerhtml = 'usernameerror'; }; </script> </body> </html>

Tujuan demo ini adalah untuk memverifikasi apakah nama pengguna dan kata sandi yang dimasukkan oleh pengguna legal saat mengklik tombol login. Jika tidak legal, pesan kesalahan akan diminta di bawah kotak input nama pengguna.

Elemen yang meminta pesan kesalahan direncanakan untuk diterapkan menggunakan label.

Buka halaman demo dengan menjalankan kode dan klik tombol login untuk melihat perubahan apa yang akan terjadi. Jika Anda menggunakan Firefox, Chrome atau IE9+, mengklik tombol login akan meminta nama pengguna salah, yang merupakan hasil yang diinginkan. Jika saya menggunakan IE6, 7, 8, bagaimana saya bisa melihat perubahan apa yang akan terjadi? Pada saat ini, saya menemukan bahwa halaman tersebut tidak meminta informasi. Buka alat pengembang dan lihat kontrol. Pada saat ini, saya akan menemukan bahwa pesan kesalahan prompt skrip600: kesalahan runtime yang tidak diketahui. Ketika saya mengalami masalah ini, saya mencoba metode Innertext dan InnerHTML, dan menemukan bahwa mereka akan melaporkan kesalahan seperti itu. Saya pikir metode penggunaannya salah dan pergi ke W3CSchool untuk memeriksanya dan menemukan bahwa itu tidak mendukung Innertext dan InnerHTML.

Mengapa kesalahan ini diminta di IE6, 7, 8 sementara Firefox, Chrome, IE9+ (browser lain belum mencoba) berjalan secara normal. Orang yang hati -hati dapat melihat masalahnya sekaligus. Untuk elemen yang meminta kesalahan nama pengguna, label mulai ditulis sebagai lable, bukan label. Tapi saya tidak menemukan masalah ini saat itu. Saya selalu berpikir ada masalah dalam penggunaan tag label. Adapun mengapa mesin JS IE6, 7, 8 akan memiliki kesalahan saat mengoperasikan properti Innertext dan InnerHTML dari elemen dengan nama label yang salah, sementara tidak ada kesalahan di Firefox, Chrome dan IE9+. Tidak terlalu jelas. Jika Anda memiliki pemahaman yang baik tentang ini, tolong jelaskan.

Pertanyaan ini sebenarnya cukup rendah, Anda telah menulis nama label secara tidak benar. Tapi saya tidak menyadarinya saat itu. Kemudian, setelah belajar dengan cermat, saya menemukan masalah ini, jadi saya akan merekamnya.