HTML <label> 요소는 사용자 인터페이스 항목의 설명을 나타냅니다.
<label>
<label> 을 {{htmlelement("input")}} 요소와 연결하면 몇 가지 이점이 있습니다:
<label> 을 <input> 요소와 연관시키려면, <input> 에 id 속성을 넣어야합니다. 그런 다음 <label> 에 id 와 같은 값의 for 속성을 넣어야합니다.
<input>
id
for
또는, <label> 안에 <input> 을 중첩시킬 수 있습니다. 이 경우 연관이 암시적이므로 for 및 id속성이 필요없습니다.
<label>Do you like peas? <input type="checkbox" name="peas"> </label>
다른 사용법 메모:
click
이 요소는 전역 특성을 포함합니다.
<label> 요소에 대한 특별한 스타일 고려 사항은 없습니다. 구조적으로 단순한 인라인 요소이므로 {{htmlelement ( "span")}} 또는 {{htmlelement ( "a")}} 요소와 같은 방식으로 스타일을 지정할 수 있습니다 }}. 텍스트를 읽기 어렵게하지 않는 한 원하는 방식으로 스타일을 적용 할 수 있습니다.
<label>Click me <input type="text"></label>
{{EmbedLiveSample('Simple_label_example', '200', '50', '')}}
<label for="username">Click me</label> <input type="text" id="username">
{{EmbedLiveSample('Using_the_for_attribute', '200', '50', '')}}
Don't place interactive elements such as {{HTMLElement("a", "anchors")}} or {{HTMLElement("button", "buttons")}} inside a label. Doing so makes it difficult for people to activate the form input associated with the label.
label
label 안에 {{HTMLElement ( "a", "anchors")}} 또는 {{HTMLElement ( "button", "buttons")}}와 같은 인터랙티브 요소를 배치하지 마십시오. 그렇게하면 사람들이 label과 관련된 양식을 입력하기 어렵습니다.
<label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions"> I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a> </label>
<label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions"> I agree to the Terms and Conditions </label> <p> <a href="terms-and-conditions.html">Read our Terms and Conditions</a> </p>
제목은 일반적으로 탐색 목적의 보조 도구로 사용되므로 <label> 내에 제목 요소를 배치하면 많은 종류의 보조 기술을 방해합니다. label의 텍스트를 시각적으로 조정해야하는 경우, <label> 요소에 적용된 CSS 클래스를 사용하십시오.
양식(form) 또는 양식의 섹션에 제목이 필요한 경우 {{HTMLElement ( "fieldset")}} 내에 배치 된 {{HTMLElement ( "legend")}} 요소를 사용하십시오.
<label for="your-name"> <h3>Your name</h3> <input id="your-name" name="your-name" type="text"> </label>
<label class="large-label" for="your-name"> Your name <input id="your-name" name="your-name" type="text"> </label>
type="button"선언과 유효한 value 속성을 가진 {{HTMLElement ( "input")}} 요소에는 연관된 레이블이 필요하지 않습니다. 그렇게하면 보조 기술이 버튼 입력을 구문 분석하는 방법을 실제로 방해 할 수 있습니다. {{HTMLElement ( "button")}} 요소에도 동일하게 적용됩니다.
type="button"
value
{{Compat("html.elements.label")}}