[HTML] <label> 태그란?

HTML에서 <label> 태그란?

label태그는 input태그의 의미를 정의하기 위한 태그입니다.

보통 input태그가 있을때 어떤 입력창인지 앞의 텍스트를 보고 판단합니다. 

      <form>
            이름 : <input type="text" id="name" name="name">
      </form>

 

 

실행해보면 input태그는 이름을 입력 하는 곳이라는것을 알 수 있죠.

그런데 다음과 같이 input태그들에 대해 의미를 설명할때 label 태그를 사용할수도 있습니다. 예제소스파일

      <form>
            <label for="description">설명 : </label>
            <input type="text" id="description" name="description"><br>
 
 
            <label for="male">남자 : </label>
            <input type="checkbox" name="gender" id="male" value="male"><br>
 
 
            <label for="male">여자 : </label>
            <input type="checkbox" name="gender" id="female"   value="female"><br>
      </form>

겉보기에는 별다른 차이가 없는 것 같습니다. 그러나 차이점이 있다면 label을 클릭하는 경우 해당 label이 설명하는 입력창이 활성화 또는 체크된다는 점 입니다. input의 type이 text인 경우에는 입력창이 활성화 되고 checkbox이거나 radio인 경우에는 체크됩니다.

label 태그 속성

label태그의 속성으로는 for가 있는데 이곳에 설명(연결)하고 싶은 input태그의 id값을 지정해 주어야 합니다. 즉 input태그에 id값이 있어야 하며, 해당 id값을 label태그의 for속성에 넣어주면 됩니다.