Front/HTML

[HTML] <label> 태그 +

오선지♬ 2022. 1. 7. 16:50
728x90
반응형

<label> 태그란?

- <label> 태그는 사용자 인터페이스(UI) 요소를 설명할 때 사용

- 보통 <input> 태그와 함께 쓰인다.

- for 속성을 사용하여 다른 요소와 결합할 수 있다. 

- for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 한다. ( name도 가능! )

- 결합하고자 하는 요소 내부에 <label> 요소를위치시키면 for 속성을 사용하지 않더라도 해당 요소와 결합시킬 수 있습니다.

 

+ 추가 : label태그의  for 라는 속성을 삽입해서 <input> id값과 일치 시키면 체크 박스의 클릭 범위를 증가시킬 수 있습니다. 

label에 적은 문자를 눌러도 input 안에 커서가 들어간다 !!!!!! 

checkbox와 같이 눌러야하는 부분이 작은경우 더욱 유용하게 쓰인다.

 

 

Ex)

 

<form action="login.do" method="post">

        여러분의 나이대를 골라보세요.<br>

      <input type="radio" name="sex" id="man" value="man">

      <label for="teen">남자</label><br>

      <input type="radio" name="sex" id="women" value="women">

      <label for="twenty">20대</label><br>

      <input type="submit">

</form>

728x90
반응형

'Front > HTML' 카테고리의 다른 글

[HTML][TABLE] <thead> / <tbody> / <tfoot>  (0) 2022.03.20
[HTML] id / class / name  (0) 2022.03.14
[HTML] a href ="#"  (0) 2022.01.23
[HTML] <form> 태그안의 id, class, name 속성  (0) 2022.01.10
[HTML] <label> 태그  (0) 2022.01.03