HTML Label 태그, input 태그와 함께 다니는 최적 조합

LABEL 태그란?

HTML에서 Label 태그는 <input>, <textarea>와 같이 사용자의 입력을 받는 태그와 함께 사용됩니다. 왜 label 태그가 함께 사용되는지 역할과 중요성에 대해 알아볼까요?

 

<input>태그에 대해 더 알아보시려면 여기를 눌러주세요

 

사용법

<label for="username">사용자명:</label>
<input type="text" id="username" name="username">

• <label>태그는 <input> 태그 주변에 함께 있습니다
• 그리고 label 속성 for와 input 속성 id를 일치시켜야 해요
• 그래야 label에 입력된 text를 눌러도 input 요소로 커서(포커스)가 이동합니다

다른 예시를 볼께요.

<input type="checkbox" id="agree" name="agree">
<label for="agree">이용 약관에 동의합니다</label>

• 이번에는 label 태그가 input 뒤에 있습니다.
• 체크박스를 먼저 만들고 뒤에 텍스트가 이어지기 때문이에요
• 여기도 마찬가지로 input id "agree"와 label for "agree"가 동일하기 때문에 서로 연결되어 있습니다

 

예시

See the Pen label by 40's Programmer (@40sProgrammer) on CodePen.

label 태그를 잘 이용해야 사용자의 UI 편의성을 높일 수 있답니다. 물론 웹구조도 보기 좋구요.