9. label 태그

label 태그는 form 태그안에서 사용하는 상호작용 요소에 이름을 붙일때 사용된다.

예를들어 id를 입력받는 input 태그와 이를 알려주는 텍스트가 있을경우 텍스트를 클릭해도 아이디에 포커싱이 가도록하고 싶을때 사용되는거같다. 또한 장애인을 위한 스크린리더기의 경우에도 label태그로 연결된 상호작용을 사용하는것같다. 웹의 접근성 향상을 위해서 라도 필수로 사용하길 권장한다고.. 책에 나와있다.

 

label 태그 :  form태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때사용함. 암시적 사용방식과 명시적 사용방법이 있다.

암시적 사용방법

See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.

설명

이처럼 label태그 안에 특정 상호요소를 집어넣는것이다. 위에 예제 코드에서 아이디라는 텍스트를 클릭시에 input 태그에 포커싱이 가는것을 확인할수 있다.

명시적 사용방법

See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.

설명

이처럼 label 태그와 input 태그의 id를 동일시 설정해서 사용하는 방법이 있다. 

암시적이면서 명시적인 사용방법

 

See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.

설명

이런식으로 두개를 혼합해서 사용할수 있는데 위에 코드에서 label 태그에 for 속성을 설정하고  input 태그에 id를 for와 맞추지 않을경우 정상적으로 동작하지 않는다. label태그에 for 속성을 주었을때는 상호작용할 요소에 id를 for속성에 맞춰주어야 정상동작하는것 같다.