html tag <label>

mdn

 

<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>

         <input type = "checkbox" name = "cheese" id = cheese">

         </label>

 

 

<label> 태그의 css 스타일링

 

단순한 inline 요소이므로 <span>, <a> 과 같은 방식으로 할 수 있다.