HTML

HTML 태그 에서 "for"속성은 무엇을 합니까?

---

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

<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 속성과 같아야합니다.

참고 URL : https://stackoverflow.com/questions/18432376/what-does-for-attribute-do-in-html-label-tag