HTML <label> 태그에서 "for"속성의 기능은 무엇입니까?

382

다음 두 코드 스 니펫의 차이점이 무엇인지 궁금합니다.

<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

과

<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

특별한 JavaScript 라이브러리를 사용할 때 무언가를 확신하지만 그 외에 HTML을 검증하거나 다른 이유로 필요한가요?

— 제프
소스

578

<label>태그는 라벨을 클릭 할 수 있습니다, 그것은 관련 입력 요소를 클릭처럼 취급됩니다. 이 연관을 작성하는 두 가지 방법이 있습니다.

한 가지 방법은 입력 요소 주위에 레이블 요소를 감싸는 것입니다.

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

다른 방법은 for속성 을 사용 하여 관련 입력의 ID를 제공하는 것입니다.

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

이것은 상자 자체를 누르지 않고 관련 텍스트를 클릭하여 상자를 확인할 수 있기 때문에 확인란과 버튼에 특히 유용합니다.

이 요소에 대한 자세한 내용은 MDN을 참조하십시오 .

— 바 마르
소스

106

for 속성은 id 속성으로 입력에 바인딩되며 name 속성은 일치하지 않아도됩니다. <label for = "theinput"> 입력 : </ label> <input type = 'text'name = 'notmatching'id = 'theinput'> 여전히 작동합니다

— Glo

4

레이블을 클릭하는 것이 항상 관련 요소를 클릭하는 것과 똑같이 취급되는 것은 아닙니다. 예를 들어 Chrome 및 Safari에서 select유일한 레이블과 관련된 레이블을 클릭하면 옵션을 확장하지 않고 선택에 초점을 맞 춥니 다.

— Emile Pels

2

@EmilePels 브라우저의 이벤트 모델에 관한 한 그것들은 동등합니다. 당신이 설명하는 것은 OS 자체가 드롭 다운 메뉴를 처리함으로써 제공되는 UI에 관한 것입니다.

— Barmar

3

액세서 빌 러티 및 스크린 리더와 매우 관련이 있으며, 왜 적극적으로 사용하는지 언급하는 것이 중요합니다.

— coyotte508

1

입력 필드에 대해 "for"속성이있는 형식의 레이블을 클릭 할 때마다 본문 클릭이 두 번 발생하여 지난 2 시간 동안 어려움을 겪고있었습니다. 나는 레이블의 클릭에 stopPropagation을 사용하더라도 왜 본문 클릭이 계속 발생했는지 왜 이해했는지 설명합니다. 입력 필드에 의해 클릭이 발생했기 때문에 설명 한 동작입니다.

— Samuel

53

이 for속성 label은 HTML 4.01 스펙 의 설명에 정의 된대로 레이블을 제어 요소와 연관시킵니다 . 이는 무엇보다도 label요소가 포커스를받을 때 (예를 들어 클릭) 포커스를 관련 컨트롤에 전달 함을 의미합니다. 라벨과 컨트롤 간의 연관은 음성 기반 사용자 에이전트에 의해 사용될 수도 있는데, 컨트롤을 다룰 때 사용자에게 관련 라벨이 무엇인지 물어볼 수있는 방법을 제공 할 수 있습니다. 시각적 연결에서와 같이 연결이 명확하지 않을 수 있습니다.

질문의 첫 번째 예제 (에서 제외 for)에서 label마크 업 사용 에는 논리적 또는 기능적 영향이 없습니다. CSS 또는 JavaScript에서 마크 업을 사용 하지 않는 한 쓸모가 없습니다.

HTML 사양에서는 레이블을 컨트롤과 연결하지 않아도되지만 WCAG (Web Content Accessibility Guidelines) 2.0에서는 레이블을 연결해야합니다. 이것은 기술 문서에 설명되어 H44 : 폼 컨트롤과 연관 텍스트 레이블에 레이블 요소를 사용하여 도 (중첩 예에 의해 암시 적 관계라고 설명한다, input내부는 label) 널리 통해 명시 적 연결로 지원되지 않습니다 for및 id속성을,

— Jukka K. Korpela
소스

10

의미 적 관계에 대한 +1과 기능적 클릭 관계를 넘어서는 의미에 대해 +1합니다.

— ulty4life

안녕하세요, 동일한 ID를 가진 두 개의 요소가 있지만 다른 div에는 레이블을 사용하여 포커스 이벤트를 추가했지만 두 번째 요소에서는 첫 번째 요소에 중점을 둡니다. <html> <body> <div id = "first_div"> <label for = "name"> 이름 </ label> <input type = "text"id = "name"> </ div> <div id = "second_div "> <label for ="name "> 이름 </ label> <input type ="text "id ="name "> </ div> </ body> </ html>

— LoveToCode

14

간단히 말해서 id입력의 내용을 참조하는 것이 전부입니다.

<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">

— 우웨 케임
소스

6

for를 추가하는 것이 인접하더라도 중요합니다. 시각 장애인을위한 일부 스크린 리더에는 문제가 있다고 들었습니다. 따라서 대체 브라우저 / 스크린 리더를 사용하는 사람들에게 친숙하려면이 방법을 사용하십시오.

— bean5

3

<label>태그 의 for 속성은 관련 요소의 id 속성과 같아야합니다.

— 라훌 트리 파시
소스

7

예,하지만 "함께 묶는 것"은 무엇을 의미합니까? 그들은 이미 HTML 구조의 이웃입니다. 이것이 내가 이해하지 못하는 것입니다.

— jeff

1

FOR 레이블이 바인딩되는 양식 요소를 지정합니다.

— Rahul Tripathi

2

@CengizFrostclaw jsfiddle.net/DmSGh --- "여기에 입력"텍스트를 모두 클릭하여 어떻게되는지보십시오.

— JJJ

1

@CengizFrostclaw있다 - 라벨은 속성 "에 대한"을 사용하여 하나의 요소에 바인딩 할 수 있습니다

— 라훌 Tripathi

1

라디오 버튼을 사용할 때와 같은 멋진 기능이 있습니다. 라벨을 클릭하면 실제로 라디오 버튼이 토글됩니다. 이것은 사용자 정의 UI에 라디오 버튼을 사용하려고 할 때 유용한 기능입니다.

— Alex

0

for 속성은이 레이블이 관련 입력 필드 또는 확인란 또는 단일 선택 단추 또는 이와 연관된 기타 데이터 입력 필드를 나타냅니다. 예를 들어

    <li>
<label>{translate:blindcopy}</label>
            <a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a> &nbsp 
            <input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
    </li>

— 팍스
소스

0

입력에 대해 for속성 의 매개 변수를 레이블링 합니다.

<input id='myInput' type='radio'>
<label for='myInput'>My 1st Radio Label</label>
<br>
<input id='input2' type='radio'>
<label for='input2'>My 2nd Radio Label</label>
<br>
<input id='input3' type='radio'>
<label for='input3'>My 3rd Radio Label</label>

스 니펫 확장

— pythag0ras_
소스