HTML <label> 태그와 for 속성, <input> 태그 사용법 3가지

1. label 태그의 역할:

- input태그와 함께 사용했을 때,

영역이 좁다는 단점을 극복할 수 있다.

(클릭 영역이 넓어진다.

ex: 체크박스 선택시 input 태그가 체크되어,

선택 영역이 넓어진다.)

 

-label태그가 input 태그를 제어할 수 있도록 돕는다.

 

2. label 태그와 함께 쓰는 for 속성

"for에 들어가는 value와 id"를 연결해준다.

 

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

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

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

버튼 영역 뿐만 아니라,

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

클릭이 가능하다!

 

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

 

3. label 태그 예제 (input)

핸드폰을 선택하는 입력 form을 만들고,

사용자가 선택한 기종을 (=value) 전송하는 코드이다.

 

input 태그만 쓸 경우,

클릭 영역이 아주 좁다.

 

3-1. label 태그 예제 (label+input)

label 태그로, input 태그를 래핑해준다.

"아이폰" 텍스트를 클릭해도,

checkbox가 작동된다.

 

label 태그의 for 속성이

input 태그의 id값과 동일하다.

그래서 for 속성은 해당 값의 id를 찾고,

event를 바인딩하도록 매핑한다.

 

3-2. label 태그 예제 (label+input 다수)

label 태그 안에 input태그를 여러 개 집어넣으면?

 

- text 영역을 눌렀을 때!!

첫 번째 input태그만, 클릭이 된다.

(galaxy 글자를 눌렀을 때,

뜬금없이 iphone이 

선택되는 걸 볼 수 있다.)

 

 

https://webisfree.com/2017-01-10/label-%ED%83%9C%EA%B7%B8%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%8B%A4%EC%96%91%ED%95%9C-%EB%B0%A9%EB%B2%95

label 태그를 사용하는 다양한 방법