label tag

 

<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

<div class="preference">
    <label for="peas">Do you like peas?</label>
    <input type="checkbox" name="peas" id="peas">
</div>

input 옆에 라벨링처럼 input을 설명해주는 것

 

<label> 을 <input> 요소와 연결하면 몇 가지 이점이 있습니다:

• label 텍스트는 텍스트 입력과 시각적으로 관련이 있을뿐만 아니라 프로그래밍적으로도 관련이 있습니다. 예를 들어, 화면리더기(screenreader) 는 폼 입력(form input)에서 label 을 읽어서 보조기술(assistive technology) 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 합니다. 
• 관련 label 을 클릭해서 input  자체에 초점을 맞추거나 활성화를 시킬 수 있습니다. (활성되어서)늘어난 누를 수 있는 영역(hit area)은 터치스크린 사용자를 포함해 입력하려하는 모든 사람에게 이점을 줍니다.

<label> 을 <input> 요소와 연관시키려면, <input> 에 id 속성을 넣어야합니다. 그런 다음 <label> 에 id 와 같은 값의  for 속성을 넣어야합니다. 

또는, <label> 안에 <input> 을 중첩시킬 수 있습니다. 이 경우 연관이 암시적이므로 for 및 id속성이 필요없습니다.

<label>Do you like peas? <input type="checkbox" name="peas"> </label>

다른 사용법 메모:

• label 이 붙여진 양식 컨트롤(form control) 은 레이블된 제어 labeled control  라고 불립니다. 하나의 input 은 여러 label들에 연관되어있습니다.
• 연관된 양식 컨트롤(form control) 이 있는 <label> 이 클릭되거나 터치되면, 이 label의 click 이벤트는 연관된 control 도 동작시킵니다.

 

 

---

label의 텍스트를 시각적으로 조정해야하는 경우, 

이렇게 할 것.

 

제목

제목은 일반적으로 탐색 목적의 보조 도구로 사용되므로 <label>  내에 제목 요소를 배치하면 많은 종류의 보조 기술을 방해합니다. label의 텍스트를 시각적으로 조정해야하는 경우,  <label> 요소에 적용된 CSS 클래스를 사용하십시오.

양식(form) 또는 양식의 섹션에 제목이 필요한 경우 <fieldset> 내에 배치 된 <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>

 

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/label출처.