[HTML] <label> 태그와 <input> 태그 사용하기

 

<label> 의 역할

1. <label> 태그는 <input type=text>, <input type=checkbox>, <input type=radio> 등의 태그와
    같이 사용하여, 클릭 가능한 영역을 확장시켜 줌

2. 즉, <label>태그는 <input>태그를 도와주는 역할로,
    <label>태그로 연결하여 쉽게 디자인하거나 클릭의 편의성을 높임

3. <label for = " ">와 <input id = " ">와 그룹을 형성하여 사용

 

 

<label for> 사용법 

label 태그의  for 속성값( <label for = " "> )과 input 태그의 id 속성값( <input id = " ">  )을 일치히켜서 사용

<form class="myform"  method="POST" action="<c:url value="/login/register"/>">
    <label for="idenfity">아이디</label>
    <input id="identify" type="text" name="id" placeholder="아이디">

    <button>회원 가입</button>
</form>

• '아이디' 라고 적힌 부분을 클릭하면, <input> 입력 창에 자동으로 커서가 생성

  

 

for 속성을 사용하지 않고 <label> 사용하는 방법 

<label> </label> 태그 사이에 <input>태그를 넣어서 사용

<div class="sns-chk">
        <label>
        	<input type="checkbox" name="sns" value="facebook"/>페이스북
        </label>
        <label>
        	<input type="checkbox" name="sns" value="kakaotalk"/>카카오톡
        </label>
        <label>
        	<input type="checkbox" name="sns" value="instagram"/>인스타그램
        </label>
</div>

 

• '페이스북' 라고 적힌 부분을 클릭하면, <checkbox>가 선택

 

 

 

 

 

 

 

참고 

https://dasima.xyz/html-label/