<label>의 for 속성

이번의 목표

01. <label> 태그에서 사용되는 for 속성에 대해 알아보자.

---

<label> 태그에는 for 라는 속성이 있습니다. 문법은 아래와 같습니다.

<label for="요소의 ID">

for 속성을 적용한 <label>을 클릭하게 되면 입력해 놓은 ID에 해당하는 요소로 포커스가 이동합니다.

이때, 요소는 <input> 태그 일 때만 유효합니다. <textarea> 등에는 작동하지 않습니다.

01. 코드
02. 실행 화면

01. 코드

<h3>input에 포커스 주는 예시</h3>
<label for="input"> >>>>>input 으로 포커스 주기<<<<<</label>
<br>
<input type="text" id="input">
<br>
<h3>radio 타입에 포커스 주는 예시 </h3>
<label for="male">남자</label><input type="radio" id="male" name="gender">
<label for="female">여자</label><input type="radio" id="female" name="gender">
<br>
<h3>textarea에 for가 작동하는지 확인하는 예시</h3>
<label id="textarea"> >>>>>textarea 로 포커스 주기<<<<< </label>
<br>
<textarea cols="50" rows="5" id="textarea"></textarea>

---

02. 실행 화면

See the Pen Untitled by woojw6012 (@SpookeyTed) on CodePen.

① textarea를 대상으로 했을때는 클릭해도 포커스가 이동하지 않는 것을 확인할 수 있습니다.