웹 폼을 만들다 보면 사용자가 여러 옵션 중에서 하나를 고르도록 해야 하는 경우가 자주 있습니다. 이럴 때 사용하는 것이 바로 셀렉트(select) 요소입니다. 셀렉트는 드롭다운 목록 형태로 옵션을 제공하며, 기본적으로는 하나의 항목만 선택할 수 있습니다.
셀렉트 요소 활용 포인트
- 시·도 이름, 숫자 등 사용자가 이미 잘 알고 있는 목록을 선택하게 할 때 <select> 태그를 사용하면 좋습니다.
- 사용자가 여러 개의 옵션을 동시에 선택할 수 있도록 하려면 multiple = "multiple" 속성을 추가하면 됩니다.
예제 코드
아래 예제 코드를 실행하면 부트스트랩 스타일이 적용된 폼 셀렉트를 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta name = "viewport" content="width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </head> <body> <form role = "form"> <div class = "form-group"> <label for = "name">Country</label> <select class = "form-control"> <option>India</option> <option>Australia</option> <option>US</option> </select> </div> </form> </body> </html>
코드 설명
위 코드의 핵심 구조를 살펴보면 다음과 같습니다.
- <div class="form-group"> : 레이블과 입력 요소를 하나의 그룹으로 묶어 부트스트랩의 기본 간격과 정렬을 적용합니다.
- <label for="name"> : 셀렉트 박스가 어떤 항목인지 사용자에게 알려주는 레이블입니다.
- <select class="form-control"> : 부트스트랩의 form-control 클래스를 적용하면 셀렉트 박스가 폼 전체 너비를 차지하며 일관된 디자인으로 표시됩니다.
- <option> : 드롭다운에 표시되는 개별 선택 항목입니다. 위 예제에서는 India, Australia, US 세 나라를 옵션으로 제공합니다.
다중 선택이 필요한 경우
사용자가 여러 항목을 한 번에 선택할 수 있게 하려면 셀렉트 태그에 다중 선택 속성을 추가하면 됩니다.
<select class = "form-control" multiple = "multiple"> <option>India</option> <option>Australia</option> <option>US</option> </select>
이렇게 하면 Ctrl(또는 Mac의 Cmd) 키를 누른 상태로 클릭해 여러 옵션을 동시에 선택할 수 있습니다. 관심 분야, 취미, 복수 지역 선택처럼 하나 이상의 값을 받아야 하는 폼에서 유용하게 활용됩니다.