html label

label태그를 텍스트나 사진에 설정하면 그 요소를 클릭하더라도 연결된 요소를 선택할 수 있어 사용자에게 편리한 기능입니다

 

예제를 통해 설명하겠습니다.

<input type="checkbox" id = "food1">
<label for="food1">김밥</label>
<input type="checkbox" id = "food2">
<label for="food2">떡볶이</label>
<input type="checkbox" id = "food3">
<label for="food3">튀김</label>
<input type="checkbox" id = "food4">
<label for="food4">오뎅</label>

 

위는 input의 id를 통해 label을 설정하였습니다.

label for = "..." 의 형식인데, "..."에 input의 id를 입력하면 됩니다.

그렇게되면 텍스트를 클릭하기만해도 체크박스에 체크가 되어있는 것을 확인 할 수 있습니다.

 

위의 사진에 네모칸에 체크박스에 클릭을 하지 않고 '김밥'이라는 텍스트에 마우스 클릭을 하면

체크가 되어있는것을 확인할 수 있습니다.