HTML <label> 태그

정의와 사용법

<label> 레이블은 input 요소에 설명(댓글)을 정의합니다。

레이블 요소는 사용자에게 특별한 효과를 표시하지 않습니다. 그러나 마우스 사용자의 접근성을 개선합니다. 레이블 요소 내에서 텍스트를 클릭하면 이 컨트롤이 트리거됩니다. 즉, 사용자가 이 레이블을 선택하면 브라우저가 자동으로 레이블과 관련된 텍스트 필드에 초점을 맞춥니다.

<label> 레이블의 for 속성 관련 요소의 id 속성과 같아야 합니다。

<label> 레이블은 여러 요소에 태그(댓글)를 정의할 수 있습니다：

위의 요소와 레이블의 올바른 사용 방법은 다음 사용자에게 유익합니다：

  • 스크린리더 사용자(사용자가 요소에 초점을 맞추면 태그를 읽습니다)
  • 매우 작은 영역(예: 체크박스)을 클릭하기 어려운 사용자 - 사용자가 클릭할 때 <label> 요소의 텍스트를 클릭할 때 입력을 전환합니다(이는 클릭 영역을 확장합니다)

추가로 참조:

HTML DOM 참조 가이드:Label 객체

예제

label을 포함한 세 개의 단일 선택 버튼:

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="제출">
</form>

직접 시도해보세요

훌륭 및 주석

훌륭:<label> 의 for 속성이 관련 요소의 id 속성과 일치해야 그들 간에 바인딩을 할 수 있습니다. 또한 요소를 <label> 요소 내에 태그를 요소에 바인딩하는 방법

속성

속성 값 설명
for 요소 id label이 어느 양식 요소에 바인딩되는지 정의합니다
form 양식 id label 필드가 속한 양식을 정의합니다

전역 속성

<label> 라벨은 또한 HTML에서의 전역 속성。

이벤트 속성을 지원합니다

<label> 라벨은 또한 HTML에서 이벤트 속성。

기본적인 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시합니다 <label> 요소:

label {
  cursor: default;
}

직접 시도해보세요

브라우저 지원

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
지원 지원 지원 지원 지원