집 > 기사 > 웹 프론트엔드 > 라벨태그_HTML/Xhtml_웹페이지 제작시 발생하는 문제점 분석 및 해결방법

라벨태그_HTML/Xhtml_웹페이지 제작시 발생하는 문제점 분석 및 해결방법

WBOY원래의: 2016-05-16 16:40:071757검색

최근에 라벨 태그를 사용해 물건을 만들었는데, 예전에는 라벨 태그를 거의 사용하지 않아서 아주 이상한 문제에 부딪혔습니다. 무엇이 문제인가요? 효과를 살펴보겠습니다

<!DOCTYPE html>
<html>
<머리>
<meta charset="utf-8" />
<title>Typeof</title>로 HTML 라벨 태그 학습
<스타일 유형="텍스트/css">
HTML, 본문 {
여백: 0;
패딩: 0;
}
.제목 {
여백: 10px;
}
.login-item, .login-button {
여백: 20px;
높이: 30px;
}
.clearfix {
명확함: 둘 다;
콘텐츠: "";
디스플레이: 블록;
}
.login-item 라벨 {
플로트: 왼쪽;
너비: 70px;
}
.로그인 항목 .text {
높이: 18px;
너비: 200px;
플로트: 왼쪽;
}
</스타일>
</머리>
<본문>
<div class="제목">
라벨 라벨 사용 중 발생하는 문제
</div>
<div class="login-itemclearfix">
<label for="username">사용자 이름: </label>
<input type="text" class="text" id="사용자 이름" name="사용자 이름" />
<lable id="J_usernameError"></label>
</div>
<div class="login-itemclearfix">
<label for="password">비밀번호  코드:</label>
<input type="text" class="text" id="password" name="사용자 이름" />
<label id="J_passwordError"></label>
</div>
<div class="login-buttonclearfix">
<input type="submit" value="Login" id="J_submitLogin" />
</div>
<스크립트>
document.getElementById('J_submitLogin').onclick = function() {
var usernameError = document.getElementById('J_usernameError');
usernameError.innerHTML = '사용자 이름 오류';
};
</스크립트>
</body>
</html>

팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다.

이 데모의 목적은 로그인 버튼을 클릭할 때 사용자를 확인하는 것입니다. 입력한 사용자 이름과 비밀번호가 올바른지 확인하세요. 그렇지 않으면 사용자 이름 입력 상자 아래에 오류 메시지가 표시됩니다.
오류 메시지를 표시하는 요소는 라벨을 활용하여 구현할 예정입니다.

코드를 실행하여 데모 페이지를 열고 로그인 버튼을 클릭한 후 어떤 일이 일어나는지 확인하세요. Firefox, Chrome 또는 IE9를 사용하는 경우 로그인 버튼을 클릭하면 "잘못된 사용자 이름"이라는 메시지가 표시됩니다. 이는 원하는 결과입니다. IE6, 7, 8을 사용하는 경우 변경 사항이 있는지 어떻게 확인할 수 있나요? 이때 페이지에 아무 정보도 표시되지 않습니다. 개발자 도구를 열고 컨트롤을 보면 "SCRIPT600: 알 수 없는 런타임 오류"라는 오류 메시지가 표시됩니다. 이 문제가 발생했을 때 innerText와 innerHTML 두 가지 방법을 사용해 보았는데 이와 같은 오류가 보고되는 것을 발견했습니다. 사용 방법이 잘못되었다고 생각하여 w3cschool에서 확인해보니 innerText라는 말이 나오지 않았습니다. 및 innerHTML은 지원되지 않습니다.

IE6, 7, 8에서는 이런 오류가 뜨는데 왜 파이어폭스, 크롬, IE9(다른 브라우저는 사용해본 적 없음)에서는 정상적으로 실행되나요? 주의깊은 사람은 문제가 어디에 있는지 즉시 알 수 있습니다. "잘못된 사용자 이름"을 묻는 요소의 경우 시작 태그가 레이블 대신 "lable"로 기록됩니다. 하지만 당시에는 이 문제를 인지하지 못했습니다. IE6, 7, 8의 JS 엔진이 요소의 innerText 및 innerHTMl 속성을 작동하는 이유에 대해서는 항상 레이블 레이블을 사용하는 방식에 문제가 있다고 생각했습니다. 라벨 이름이 잘못되어 오류가 발생하지만 Firefox, Chrome 및 IE9에서는 오류가 없습니다. 이에 대해 자세히 아는 친구가 있으면 설명하십시오.
이 문제는 사실 꽤 낮은 수준의 문제입니다. 라벨명을 잘못 썼네요. 하지만 당시에는 이를 눈치채지 못하다가 나중에 주의깊게 연구한 결과 이 문제를 발견하여 기록하게 되었습니다.

성명：

이전 기사：입력 요소 [type="file"]_HTML/Xhtml_Web 페이지 제작 시 스타일 사용자 정의 및 브라우저 호환성 문제에 대한 논의다음 기사：입력 요소 [type="file"]_HTML/Xhtml_Web 페이지 제작 시 스타일 사용자 정의 및 브라우저 호환성 문제에 대한 논의

라벨태그_HTML/Xhtml_웹페이지 제작시 발생하는 문제점 분석 및 해결방법

관련 기사