태그 label

태그 label는 input, textarea, select 등과 같은 입력 필드에 대한 레이블을 지정합니다.

레이블은 for 속성을 사용하여 특정 입력 필드에 연결됩니다. 여기에는 레이블이 연결된 입력 필드의 id 속성 값을 지정해야 합니다. 또한 요소를 label 태그 안에 넣으면 레이블이 해당 요소에 연결됩니다. 이 경우 for 속성을 지정할 필요가 없습니다. 더 나은 이해를 위해 예제를 참고하세요.

레이블을 클릭하면 여기에 연결된 체크박스 또는 라디오 버튼의 상태가 체크됨에서 체크 해제됨으로 또는 그 반대로 변경됩니다. 이 경우 레이블은 편의를 위해 필요합니다: 폼의 작은 요소들은 커서로 클릭하기 어렵지만, 긴 텍스트가 있는 레이블은 훨씬 쉽게 클릭할 수 있습니다.

레이블에 연결된 input 및 textarea 유형의 텍스트 입력 필드는 입력 포커스를 받습니다. 포커스 란 입력 필드에서 커서가 깜박이는 상태로, 이때 키보드로 무언가를 입력하면 텍스트가 이 필드에 들어갑니다 (포커스에 대한 고급 이해를 위해 의사 클래스 focus 참조).

label 레이블은 체크박스 또는 라디오 버튼을 모방하는 데 사용할 수 있습니다. 이는 checkbox 또는 radio를 자체 디자인으로 만들기 위해 필요합니다 (이는 CSS로는 금지되어 있지만, 교묘한 방법으로 가능합니다).

속성

속성	설명
`for`	이 속성에는 레이블 `label`가 연결된 입력 필드의 id 속성 값을 지정해야 합니다.
`accesskey`	레이블에 연결된 (`for` 속성을 통해) 폼 요소로 이동하는 데 사용할 수 있는 단축키를 지정합니다. 자세한 내용은 `accesskey` 속성을 참조하세요.

예제 . 체크박스

checkbox 플래그에 for 속성을 사용하여 레이블을 연결해 보겠습니다. 레이블을 클릭하면 플래그의 상태가 체크됨에서 체크 해제됨으로 또는 그 반대로 변경되는 것을 볼 수 있습니다:

<input type="checkbox" id="checkbox">
<label for="checkbox">나는 id가 checkbox인 체크박스에 연결되었습니다.</label>

예제 . label 안에

이번에는 for 속성을 통해 레이블을 연결하지 않고, 요소들을 직접 label 태그 안에 넣어 보겠습니다. 이 경우 label 텍스트를 클릭해도 요소가 활성화됩니다:

<label><input type="checkbox"> 레이블</label>

예제 . 텍스트 입력 필드

input 태그에 for 속성을 사용하여 레이블을 연결해 보겠습니다. 레이블을 클릭하면 입력 필드가 포커스를 받습니다. 이때 필드에 포함된 텍스트 (value 속성을 사용하여 추가함) 가 선택됩니다. 키보드로 무언가를 입력하기 시작하면 이 텍스트는 지워집니다. 텍스트를 삭제하지 않고 선택을 해제하려면 입력 필드를 마우스로 클릭하면 됩니다: 이렇게 하면 포커스는 사라지지 않고 선택만 사라집니다:

<input type="text" id="input1" value="어떤 텍스트">
<label for="input1">나는 id가 input1인 인풋에 연결되었습니다.</label>

참고 항목

필드 그룹화 위에 캡션을 지정하는 태그 legend