웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
입력폼을 구성하는 다양한 요소들 중 input 태그의 체크박스나 라디오 버튼 등이 많이 사용되죠. 이런 요소들은 다양한 선택 요소들 중 방문자로부터 선택 값을 얻을 수 있는 편리한 인터페이스를 제공하고 있습니다. 이런 입력폼을 label 태그와 함께 사용하면 원하는 input 태그 등의 입력폼을 체크하거나 언체크 등의 행동이 가능합니다.
label 태그는 다양한 형태로 활용될 수 있으며 아래는 퍼블리싱 단계에서 다양한 방법으로 활용이 가능한 label 태그의 쓰임에 대하여 정리한 내용입니다. 다양한 상황에서 활용되는 label 태그의 쓰임을 알아보세요.
# label 태그의 역할
label태그가 하는 일은 input 태그를 제어하여 상태값을 변경하도록 돕습니다. 이는 input 태그만으로 선택하기 어렵거나 더 좋은 사용자 경험을 제공하기 위한 용도이며 만약 label이 없이 input 태그만 클릭하여 선택하는 경우를 생각해보세요. input 태그 자체는 영역이 작아 클릭하기 어렵거나 서로 다른 위치의 input 태그를 제어하려면 부득히 복잡한 스크립트를 사용해야할 수도 있죠. label 태그는 이런 점으로부터 자유롭고 매우 편리하게 사용할 수 있는 방법입니다.! 편의성, 사용성을 확대의 목적
일반적으로 가장 많이 활용되는 이유는 편의성, 사용성을 확대의 목적 위함이다. 체크박스를 예로 들자면 최근에는 클릭영역이 단순 체크박스 영역에 국한된 것이 아니라 체크박스가 가리키는 툴팁영역에도 클릭시 input 태그가 함께 체크될 수 있습니다. ! label 태그 사용방법 및 예제보기
label 태그는 아래와 같이 사용되며 for 속성을 옵션으로 선택할 수 있습니다. 이때 for와 id는 함께 동작하게됩니다.<label for="fruitItem">여기를 클릭</label>
<input id="fruitItem" type="checkbox" />
위 코드는 label 태그안의 영역을 클릭할 경우 for 속성이 지정된 fruititem 이라는 id 값을 찾습니다. 즉 아래의 input 태그가 원격으로.... 자동으로 클릭한 것과 같이 동작하게 되죠.
스크린샷) label 태그 사용으로 텍스트까지 선택 가능한 방법# label 태그의 활용 및 예제
그럼 간단한 예제를 구현해보겠습니다. 만약 과일을 선택하는 입력폼을 만들고 선택한 과일을 전송하는 예제를 만들 경우 코드는 아래와 같이 구현할 수 있을 것입니다.@ label.html
<form name="selectFruitForm">
<p>원하는 과일을 선택하세요.</p>
<ul>
<li><input type="checkbox" /> 바나나</li>
<li><input type="checkbox" /> 사과</li>
</ul>
</form>
<p>원하는 과일을 선택하세요.</p>
<ul>
<li><input type="checkbox" /> 바나나</li>
<li><input type="checkbox" /> 사과</li>
</ul>
</form>
위 예제는 잘 동작하겠지만 클릭 영역이 체크박스에 국한됩니다. 그러므로 label 태그를 사용하여 클릭 영역을 확대해보겠습니다. 이를 위하여 텍스트에 label을 추가하려고 합니다.
@label.html
<form name="selectFruit">
<p>원하는 과일을 선택하세요.</p>
<ul>
<li>
<input id="option01" /> <label for="option01">바나나</label>
</li>
<li>
<input id="option02" /> <label for="option02">사과</label>
</li>
</ul>
</form>
<p>원하는 과일을 선택하세요.</p>
<ul>
<li>
<input id="option01" /> <label for="option01">바나나</label>
</li>
<li>
<input id="option02" /> <label for="option02">사과</label>
</li>
</ul>
</form>
변경된 코드는 기존의 텍스트 영역에 label 태그로 랩핑하였습니다. label 태그에 선언된 for 속성은 해당하는 값의 id를 찾아 이벤트를 바인딩하도록 맵핑하는 역할을 수행합니다. 이제 사용자는 좀 더 향상된 경험을 가지게되겠죠.
! 좀 더 쉽게 사용하는 방법
코드는 위 자체만으로도 매우 잘 동작합니다. 하지만 아쉬운 점이 있다면 선택지가 많은 경우를 예를들수 있습니다. 이 경우 다양한 선택지를 위해 매우 많은 수의 id와 for 속성이 필요하게 되죠. 물론 코드도 그 많큼 길어지게 될 것입니다. 예를들어 선택가능한 과일 종류가 100개인 경우 100 x 2 = 200, 총 200개의 id 그리고 for 속성이 필요하게됩니다. 이를 간소화하여 코딩하려면 어떻게 해야할까요?해결 방법은 label 태그안에 input을 위치시키는 방법이있습니다. 이 방법은 label 태그 안에 있는 input 태그를 선택시 별도의 for 선택 없이도 잘 동작하게합니다. 아래와 같이 코드를 변경하는 것이 가능하죠.
! label 태그 안에 input 태그를 위치시키는 방법
input 태그를 label 태그 안에 위치하도록 아래와 같이 코드를 변경합니다.<form name="selectFruit">
<ul>
<li>
<label><input type="checkbox" /> 바나나</label>
</li>
<li>
<label><input type="checkbox" /> 사과</label>
</li>
</ul>
</form>
<ul>
<li>
<label><input type="checkbox" /> 바나나</label>
</li>
<li>
<label><input type="checkbox" /> 사과</label>
</li>
</ul>
</form>
이제 라벨의 텍스트를 클릭하여도 라디오 버튼이 함께 동작할 것입니다.
# 궁금한 점
그렇다면 label 태그 안에 다수의 input 태그가 존재하는 경우 어떻게 될까요? 생각 가능한 시나리오는 아래와 같습니다.
- 첫번째 input 요소만 동작한다.- - 모든 input 요소가 동작한다.
- - 아무것도 동작하지 않는다.
실제로 어떻게 동작하는지 아래와 같이 만들어보았습니다.
<label>
<input type="checkbox" /> 바나나<br />
<input type="checkbox" /> 사과
</label>
<input type="checkbox" /> 바나나<br />
<input type="checkbox" /> 사과
</label>
위 코드의 실행 결과는 어떻게 볼까요? 직접 만들고 클릭해보면 그 결과는 아래와 같습니다...
- 사과를 가리키는 체크박스를 클릭할 경우 해당 체크박스가 클릭된다.- - label 태그 영역을 클릭할 경우 바나나의 체크박스만 동작한다.
즉 결론은 예상했던 시나리오의 1번, '맨 위에 위치한 요소만 클릭된다'입니다.
여기까지 label 태그에 대하여 알아보았습니다. label 태그는 이처럼 텍스트에 많이 사용되나 아이콘에도 많이 사용됩니다. 예를들어 바나나 아이콘이 존재하는 경우 이 이 아이콘을 클릭하는 경우에도 선택되게끔 할 수 있겠죠.
! 마치면서
여기까지 label 태그에 대하여 알아보았는데 label 태그는 매우 간단하면서 사용성, 사용자에게 매우 편리한 UI를 제공하므로 꼭 알아두어야 할 것 입니다..아래의 글도 찾고 계시지 않나요?
- [html] input 태그 number 타입의 maxlength 최대 자릿수 설정하기
- 자바스크립트를 사용하여 input 태그에 한글 입력 막기, 한글 불가 방법
[react] antd 라이브러리 Input 컴포넌트
[React] antd 라이브러리 checkbox, radio 사용방법 및 예제- input 입력폼 엔터키 누를 경우 submit 막기, prevent
- input 태그 accept 속성 사용하는 방법은?
[HTML] input 타입 number 알아보기
폼태그에서 그룹화하는 fieldset 태그
[JavaScript] Input 태그의 체크여부 확인하기, 체크값 불러오기