본문 바로가기
HTML&CSS

[HTML] label 태그의 for 속성

by dev또리 2023. 8. 8.
728x90

 

 

 

 

<label> 태그의 for 속성은 라벨(label)과 결합될 요소를 명시한다.

 

<label for="요소 id">

요소 id : 라벨과 결합될 요소의 id 속성값

 

 

<form action="/examples/media/action_target.php" method="get">
    당신의 나이대를 골라주세요.<br>
    <input type="radio" name="ages" id="teen" value="teenage">
    <label for="teen">10대</label><br>
    <input type="radio" name="ages" id="twenty" value="twenties">
    <label for="twenty">20대</label><br>
    <input type="radio" name="ages" id="thirty" value="thirties">
    <label for="thirty">30대</label><br>
    <input type="radio" name="ages" id="forty" value="forties">
    <label for="forty">40대 이상</label><br>
    <input type="submit">
</form>

 

 

(label 태그 내부의 영역을 선택하면,

for 속성이 지정된 "box-item"인 id값을 찾는다.)

=> 클릭 영역이 넓어지는 이유.

버튼 영역 뿐만 아니라,

텍스트 영역까지 포함되어서

클릭이 가능하다!

 

→ 그래서 for, id는 이름을 같게 써준다.

728x90

댓글