Skip to main content

label 태그


  label 태그

<label> 요소는 일반적으로 <input>, <textarea>, <select>와 같은 폼 필드와 연결하여 사용합니다. <label>과 폼 필드는 for와 id 속성으로 연결됩니다.

<form> 
  <label for="email">Email Address</label>
  <input type="email" id="email" name="email"> 
</form>
 label 태그를 사용하지 않아도 되는 경우
  • 시각적으로 명확하게 구분된 필드: 폼 필드와 그에 대한 설명(예: 텍스트)이 분명히 인식될 수 있도록 디자인된 경우, 일부 사용자들은 <label> 없이도 필드의 목적을 이해할 수 있습니다.

  • 간단한 폼 필드: 예를 들어, <input type="text"> 필드가 이미 매우 직관적인 설명을 가지고 있고, 특별한 추가 설명이 필요하지 않다고 판단되는 경우에는 <label> 없이도 사용할 수 있습니다.

 label 태그를 사용해야 하는 경우

폼 필드와 관련된 설명이 필요할 때는 <label>을 반드시 사용하는 것이 좋습니다. 특히 다음과 같은 경우에는 <label>이 필요합니다:

  • 필드에 대한 설명이 명확하지 않거나 추가적인 설명이 필요한 경우: 예를 들어, 이메일 주소, 비밀번호와 같은 입력 필드는 반드시 해당 필드와 연결된 <label>을 가져야 합니다.

  • 스크린 리더 사용자: 스크린 리더는 폼 필드를 읽을 때 <label> 요소를 사용하여 필드에 대한 설명을 제공합니다. 따라서 모든 입력 요소에 대한 설명을 제공하는 <label>을 사용해야 합니다.