Page 1 of 1

[3.0.8] label 테그 기현상?

Posted: 2009 04 09 14:46 18
by rwxrwxrwx
3.0.8 버전 사용자 입니다.
아랫글에 firebug 사용시 메모리 누수는 저도 격고 있는 문제라 일단 넘어갑니다.

1. html 편집기 (메모장 or editplus or ultraedit 등)을 엽니다.

2. 스크립트 한줄 없는 깨끗한 상태?에서 body 테그 내에 다음과 같은 코드를 넣습니다.

Code: Select all

        <label>
            <input type="text" name="a" id="a" size="12">
            <input type="text" name="b" id="b" size="12">
        </label>
3. 저장을 하고 firefox로 열어봅니다.
4. 2번째 input 테그 영역에 입력이 되십니까?

제가 <label> 테그의 사용법을 잘 못 알고 있을 수 있습니다.
그러나 IE6 에서는 입력이 되는데 FF에서는 입력을 할 수 없더군요...

한수 가르침을 주십시요~ 버근가요? 제 사용법이 틀렸나요?

Re: [3.0.8] label 테그 기현상?

Posted: 2009 04 09 18:56 36
by hyeonseok
암묵적 레이블(for와 id 없이 사용)의 경우 하나의 레이블에는 하나의 입력 서식만 들어갈 수 있습니다.
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.
http://www.w3.org/TR/html401/interact/f ... l#h-17.9.1

HTML 사용이 잘못된 것이기 때문에 브라우저의 정상적인 작동을 보장할 수 없는 상황이라고 볼 수 있습니다.

보통의 브라우저들은 레이블 안의 텍스트를 클릭할 경우 이를 입력 서식과 연결시켜주는 기능을 가지고 있습니다. 파이어폭스 외의 브라우저들은 클릭 영역을 레이블 안의 요소로 제한하고 있는데 반해 파이어폭스는 클릭 영역을 레이블 요소 전체, 또는 레이블 요소 안의 모든 요소로 설정하고 있는 듯합니다. 그래서 클릭을 하면 첫번째 입력 서식으로 포커스가 이동하는 것입니다. 만약에 키보드로 탭을 눌러서 서식을 이동하고 입력한다면 입력이 잘 됩니다.

굳이 말하자면 불편한 UI 구성, 또는 UI 버그로 볼 수 있지만, 앞에서 말했듯이 잘못된 HTML 사용이기 때문에 버그라고까지 말할 수는 없을 것 같습니다.

http://hyeonseok.com/pmwiki/index.php/Markup/Label