Atomic Habits

<Input> 요소의 클릭 유효 범위 확장 - <lable for="id"> 본문

IT/HTML-CSS

<Input> 요소의 클릭 유효 범위 확장 - <lable for="id">

체계성 2022. 5. 29. 09:40

label for?

<label for="값">  : label 태그는 input 태그를 제어하여 상태를 변경하게 도와주는 태그이다.

정말 간단히 설명하면, 아래의 코드를 바탕으로 그림과 같다.

<label for="fruititem"> <input id="fruititem" type="chkbox">
<label for="fruititem"> <input id="fruititem" type="chkbox">


위의 그림처럼 클릭의 유효범위라고 생각하면 될것같다.
그리고, label에 for 태그를 쓸때는, 아래의 input 태그의 id값고 같은 값을 써줘야한다.
만약 일일이 for를 해주기가 귀찮다면, 아래처럼 label을 바깥으로 감싸주면 된다.

<label><input type="chkBox" />apple</label>
 
Comments