html label 이란? label 태그 for 사용법

html 에서 로그인양식이라든지 어떠한 틀을 만들려고 할때 아래와 같이 label 태그를 보는 경우가 있다.

  <div>
    <h1>로그인</h1>
    <div>
      <div>
        <label for="userId">ID</label>
        <input id="userId" type="text">
      </div>
    </div>
  </div>

 

label 은 주로 값을 입력받는 곳에 이름을 적는 태그이며

for 를 통해 for 뒤에 나오는 값 과 id 이름 이 같은것을 찾아 연결시키는 역할을 한다.

즉, 간단히 말하면 위와 같은 경우에 label 부분을 마우스로 클릭하여도

for="userId" 를 통해 id="userId" 를 가지는 input 부분에 값을 입력할 수 있다.