HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML: <label> 태그

HTML <label> 요소(레이블)는 사용자 인터페이스에서 특정 요소의 설명을 나타냅니다. <label> 태그는 사용자 입력(예: <button>, <input>, <meter>, <output>, <progress>, <select>, 또는 <textarea> 태그)에 제목을 생성하는 데 사용됩니다. 이 태그는 일반적으로 <label> 요소라고도 합니다.

온라인 예제

두 개의 입력 필드와 관련된 레이블을 포함한 간단한 HTML 양식:

예제

!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　label 태그 사용(기본 강의 웹사이트 oldtoolbag.com)</title>
</head>
<body>
<h1>label 사용</h1>
<form action="demo-form.php">
　　<label for="company">회사:　</label>
　　<input type="text" name="company" id="company"><br>
　　<label for="address">주소:　</label>
　　<input type="text" name="address" id="address"><br>
　　<input type="submit" value="제출">
</form>
</body>
</html>

테스트를 보고 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

현재 대부분의 브라우저가 <label> 태그를 지원합니다.

태그 정의 및 사용 설명

<label> 태그는 input 요소에 설명(표시)을 정의합니다. 이는 웹 페이지에서 상호작용 컨트롤의 제목을 표시하는 데 사용됩니다.

label 요소는 사용자에게 특별한 효과를 표시하지 않습니다. 그러나 마우스 사용자의 사용성을 개선합니다. label 요소 내에서 텍스트를 클릭하면 이 컨트롤이 트리거됩니다. 즉, 사용자가 이 태그를 선택하면 브라우저가 자동으로 태그와 관련된 형식 컨트롤로 포커스를 이동합니다.

<label> 태그의 "for" 속성은 관련 요소의 "id" 속성과 동일해야 합니다.

안내와 주의사항

안내:"for" 속성은 label을 다른 요소에 연결할 수 있습니다. "for" 속성의 값을 관련 요소의 id 속성 값으로 설정하세요.

HTML 4.01 와 HTML5의 차이점

"form" 속성은 HTML5 의 새 속성

속성

New: HTML5 새 속성

속성	값	설명
for	element_id	label이 어느 양식 요소와 연결되는지 정의합니다
formHTML5	form_id	form 필드에 소속된 하나나 여러 개의 양식을 정의합니다

전역 속성

<label> 태그는 전역 속성을 지원합니다, 전체 속성 테이블을 참조하세요 HTML 전역 속성。

이벤트 속성

<label> 태그는 모든 이벤트 속성을 지원합니다 HTML 이벤트 속성。

HTML: <legend> 태그 HTML5: <keygen> 태그