Maison > Article > interface Web > Analyse et solutions aux problèmes rencontrés lors de l'utilisation des balises d'étiquettes_HTML/Xhtml_Production de pages Web

Analyse et solutions aux problèmes rencontrés lors de l'utilisation des balises d'étiquettes_HTML/Xhtml_Production de pages Web

WBOYoriginal: 2016-05-16 16:40:071792parcourir

J'ai récemment utilisé des balises d'étiquette lors de la création d'objets. Comme les balises d'étiquette étaient rarement utilisées auparavant, j'ai rencontré un problème très étrange. Quel est le problème ? Voyons un effet ci-dessous

<!DOCTYPE html>
<html>
<tête>
<meta charset="utf-8" />
<title>Apprentissage des balises d'étiquette HTML par Typeof</title>
<style type="text/css">
html, corps {
marge : 0 ;
remplissage : 0 ;
}
.titre {
marge : 10px ;
}
.élément de connexion, .bouton de connexion {
marge : 20px ;
hauteur : 30px ;
}
.clearfix {
clair : les deux ;
contenu: "";
affichage : bloc ;
}
.étiquette de l'élément de connexion {
flotteur : gauche ;
largeur : 70px ;
}
.élément de connexion .text {
hauteur : 18px ;
largeur : 200 px ;
flotteur : gauche ;
}
</style>
≪/tête>
<corps>
<div class="titre">
Problèmes rencontrés lors de l'utilisation des étiquettes label
</div>
<div class="élément de connexion clearfix">
<label for="nom d'utilisateur">Nom d'utilisateur : </label>
<input type="text" class="text" id="username" name="username" />
<lable id="J_usernameError"></label>
</div>
<div class="élément de connexion clearfix">
<label for="password">Mot de passe  code :</label>
<input type="text" class="text" id="mot de passe" name="nom d'utilisateur" />
<ID d'étiquette="J_passwordError"></label>
</div>
<div class="bouton de connexion clearfix">
<input type="submit" value="Connexion" id="J_submitLogin" />
</div>
<script>
document.getElementById('J_submitLogin').onclick = function() {
var usernameError = document.getElementById('J_usernameError');
usernameError.innerHTML = 'Erreur de nom d'utilisateur';
} ;
</script>
</corps>
</html>

Astuce : Vous pouvez modifier une partie du code avant d'exécuter

Le but de cette démo est de vérifier l'utilisateur lorsque vous cliquez sur le bouton de connexion Vérifiez si le nom d'utilisateur et le mot de passe saisis sont légaux. Sinon, un message d'erreur s'affichera sous la zone de saisie du nom d'utilisateur.
L'élément qui provoque le message d'erreur devrait être implémenté avec label.

Ouvrez la page de démonstration en exécutant le code, cliquez sur le bouton de connexion et voyez ce qui se passe. Si vous utilisez Firefox, Chrome ou IE9, après avoir cliqué sur le bouton de connexion, vous serez invité à indiquer un « nom d'utilisateur incorrect », ce qui est le résultat souhaité. Si vous utilisez IE6, 7 ou 8, comment pouvez-vous vérifier s’il y a des changements ? À ce stade, vous constatez qu'aucune information n'est demandée sur la page. Ouvrez les outils de développement et examinez les contrôles. À ce stade, vous constaterez que le message d'erreur « SCRIPT600 : erreur d'exécution inconnue » s'affiche. Lorsque j'ai rencontré ce problème, j'ai essayé deux méthodes, innerText et innerHTML, et j'ai constaté que des erreurs comme celle-ci étaient signalées. Je pensais que c'était la mauvaise façon de l'utiliser. Je l'ai vérifié sur w3cschool et j'ai constaté qu'il ne disait pas que innerText. et innerHTML ne sont pas pris en charge.

Pourquoi une telle erreur est-elle générée dans IE6, 7 et 8 alors que Firefox, Chrome et IE9 (les autres navigateurs n'ont pas été essayés) fonctionnent normalement. Les personnes prudentes peuvent immédiatement voir où se situe le problème. Pour l'élément qui demande « mauvais nom d'utilisateur », la balise de début est écrite sous la forme « lable » au lieu de label. Mais je n'ai pas remarqué ce problème à l'époque. J'ai toujours pensé que c'était un problème avec la façon dont l'étiquette label était utilisée. Quant à savoir pourquoi le moteur JS d'IE6, 7 et 8 exploiterait les attributs innerText et innerHTMl des éléments. avec des noms d'étiquette incorrects. Une erreur se produit, mais il n'y a pas d'erreur dans Firefox, Chrome et IE9. Ce n'est pas très clair. S'il y a des amis qui en savent plus, veuillez l'expliquer.
Ce problème est en fait d'assez bas niveau. J'ai mal écrit le nom de l'étiquette. Mais je ne l'ai pas remarqué à l'époque. J'ai découvert ce problème plus tard après une étude minutieuse, alors j'ai décidé de l'enregistrer.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Discussion sur les problèmes de personnalisation du style et de compatibilité du navigateur lors de la production d'un élément d'entrée [type="file"]_HTML/Xhtml_Web pageArticle suivant：Discussion sur les problèmes de personnalisation du style et de compatibilité du navigateur lors de la production d'un élément d'entrée [type="file"]_HTML/Xhtml_Web page

Articles Liés

Voir plus