다음 두 코드 스 니펫의 차이점이 무엇인지 궁금합니다.
<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을 검증하거나 다른 이유로 필요한가요?
답변
<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을 참조하십시오 .
답변
이 for속성 label은 HTML 4.01 스펙 의 설명에 정의 된대로 레이블을 제어 요소와 연관시킵니다 . 이는 무엇보다도 label요소가 포커스를받을 때 (예를 들어 클릭) 포커스를 관련 컨트롤에 전달 함을 의미합니다. 라벨과 컨트롤 간의 연관은 음성 기반 사용자 에이전트에 의해 사용될 수도 있는데, 컨트롤을 다룰 때 사용자에게 관련 라벨이 무엇인지 물어볼 수있는 방법을 제공 할 수 있습니다. 시각적 연결에서와 같이 연결이 명확하지 않을 수 있습니다.
질문의 첫 번째 예제 (에서 제외 for)에서 label마크 업 사용 에는 논리적 또는 기능적 영향이 없습니다. CSS 또는 JavaScript에서 마크 업을 사용 하지 않는 한 쓸모가 없습니다.
HTML 사양에서는 레이블을 컨트롤과 연결하지 않아도되지만 WCAG (Web Content Accessibility Guidelines) 2.0에서는 레이블을 연결해야합니다. 이것은 기술 문서에 설명되어 H44 : 폼 컨트롤과 연관 텍스트 레이블에 레이블 요소를 사용하여 도 (중첩 예에 의해 암시 적 관계라고 설명한다, input내부는 label) 널리 통해 명시 적 연결로 지원되지 않습니다 for및 id속성을,
답변
간단히 말해서 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">답변
<label>태그 의 for 속성은 관련 요소의 id 속성과 같아야합니다.
답변
for 속성은이 레이블이 관련 입력 필드 또는 확인란 또는 단일 선택 단추 또는 이와 연관된 기타 데이터 입력 필드를 나타냅니다. 예를 들어
<li>
<label>{translate:blindcopy}</label>
<a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a>  
<input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
</li>답변
입력에 대해 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>