레이블이 입력 요소 만 참조 할 수 있습니까?

StackOverflow https://stackoverflow.com/questions/1094352

  •  11-09-2019
  •  | 
  •  

문제

W3Schools는 이것에 대해 말할 것입니다 라벨:

그만큼 <label> 태그는 AN에 대한 레이블을 정의합니다 입력 요소. 강조 광산

이것은 다음 HTML이 유효하지 않다는 것을 의미합니까?

<!doctype html>
<html>
    <head>
         <title>Example document</title>
    </head>
    <body>
        <label for="x">Label</label> 
        <hr>
        <div id="q" contentEditable="true">Hello</div>
        <hr>
        <div id="x" contentEditable="true">World</div>
    </body>
</html>

Chrome과 IE8은 모두 초점을 맞 춥니 다 World 언제 Label 클릭하면 Firefox는 그렇지 않습니다. 어느 것이 맞습니까?

도움이 되었습니까?

해결책

에 따르면 W3C 그것은 형태 제어에 적용되며 형태 제어는 다음과 같습니다. ~로써 정의 된:

  • 버튼
  • 확인란
  • 라디오 버튼
  • 메뉴
  • 텍스트 입력
  • 파일 선택
  • 숨겨진 컨트롤
  • 객체 태그

브라우저가 해당 요소로 제한하지 않은 경우 Firefox는 기술적으로 옳지 않지만 기술적으로 옳습니다.

다른 팁

HTML 사양에 대해 말합니다 label"속성"에 대한 's ", 현재,이 속성의 값은 동일한 문서에서 다른 컨트롤의 ID 속성 값과 동일해야합니다. 결석하면 정의되는 레이블은 요소의 내용과 연관됩니다. "

따라서 "for"의 ID 참조는 컨트롤의 참조가되어야합니다. 컨트롤이란 무엇입니까? 사양은 기본적으로 말한다 input 그대로 통제입니다 button, select, 또는 object. 따라서 Firefox는 기술적으로 옳습니다 div 통제가 아닙니다.

라벨 시맨틱은 특히 컨트롤을위한 것이기 때문에 마크 업의 적절한 사용이 아니라고 말합니다.

레이블 요소는 암시 적 레이블이없는 컨트롤에 대한 레이블을 지정하는 데 사용됩니다.

http://www.w3.org/tr/html401/interact/forms.html#h-17.9.1

최신 Whatwg 사양은 다음과 같습니다.

일부 요소는 모두 형태 관련이 아니라 라벨 가능한 요소로 분류됩니다. 이들은 레이블 요소와 관련 될 수있는 요소입니다.

  • button, input (만약 type 속성은 숨겨진 상태에 있지 않습니다), meter, output, progress, select, textarea

...

그만큼 for 속성은 캡션이 연관 될 양식 제어를 나타내도록 지정 될 수 있습니다. 속성이 지정된 경우 속성의 값은 같은 트리에서 레이블 가능한 요소의 ID 여야합니다. label 요소.

(원천: https://html.spec.whatwg.org/multipage/forms.html.)

다시 말해, 표준은 만 허용합니다 for 위에 나열된 7 개의 태그 유형 중 하나의 요소를 가리키는 속성. 질문에 전시 된 HTML ( for 편집 가능한 요소 div따라서)는 현재 사양에 따라 기술적으로 유효하지 않습니다.

그만큼 NU HTML 검사기 (그게 Whatwg에 의해 승인되었습니다) 동의; 질문에서 HTML 문서를 검증하도록 요청하면 다음과 같습니다.

오류: 값의 가치 for 의 속성 label 요소는 숨겨지지 않은 양식 제어의 ID 여야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top