Select Box 알아 보기

폼(form)요소 중에 다양하게 활용되는 "Select Box" 또는 "Combo Box" 에 대해 알아 보자.

html 태그가 select 이다 보니 "Select Box"라고 많이들 부르는데 외국쪽은 "Combo Box","List Box","Drop Down Box"라 많이 칭하는거 같다.

Select Box는 여러개의 옵션들 중 하나 이상을 선택하는 것이다.

"Checkbox"와 "Radio"의 특징을 가지고 있으면서 "Checkbox"나 "Radio" 보다 차지하는 영역도 적어서 많이 활용 된다.

물론 "Checkbox"와 "Radio" 보다는 덜 직관적이다는 단점도 있다.

쇼핑몰 카테고리를 예를 들어 설명 해보자

상황 1. 전자제품 쇼핑몰에서 분류(카테고리)별로 제품 검색할 때...

1. "Radio"를 이용

카테고리 : 전체 PC/노트북 핸드폰/패드 가전제품 카메라  

"Radio"로 했을때 한눈에 어떤 카테고리가 있는지 파악이 되어 좀 더 직관적이고 바로 클릭해서 선택할 수 있다.

그런데 영역도 많이 차지하고 카테고리가 많을 경우 모양새도 너저분하게 된다.

만약 여러개를 선택해야 한다면 "Checkbox"를 이용하면 된다.

2. "Select Box"를 이용

카테고리 PC/노트북 핸드폰/패드 가전제품 카메라

보기에도 깔끔 하다.

보통 이런 형식으로 검색폼을 구성한다.

그런데 카테고리에 뭐가 있는지 한번에 알수 없고 선택 하기 위해서는 마우스를 2번 클릭 해야 한다는 단점이 있다.

상황 2. 관리자 모드에서 카테고리 관리

관리자 페이지에서 카테고리를 관리할때도 "Select Box"는 유용하다.

"Select Box"를 "JQueryUI" 나 "Bootstrap" 등 UI 프레임워크로 대체할 수 있지만 순수 HTML으로는 "Select Box"가 편하다.

물론 복잡한 UI나 로직이라면 달라지겠지만...

카테고리 PC/노트북 핸드폰/패드 가전제품 카메라

오래전에 사용한 구조다. 물론 요즘도 가끔 사용하지만...

오른쪽 텍스트 박스에 카네고리명을 입력하고 추가 버튼을 클릭하면 왼쪽 "Select Box"에 추가 된다.

"Select Box"에서 카테고리를 선택하면 오른쪽 "Text Box"에 카테고리명이 입력되고, 카테고리명을 수정하고 수정 버튼을 클릭하면 수정된 카테고리명이 "Select Box"에 반영 된다.

물론 카테고리를 선택하고 삭제 하면 "Select Box"에서 삭제 된다.

카테고리를 선택하고 "위로", "아래" 버튼을 클릭해서 위치를 변경할 수도 있다.

상황3. option을 그룹별로 나누고 표시하고 싶다?!

"select box"의 option 을 지정하다 보면 그룹별로(카테고리별) 묶어서 표시하고 싶어질때가 있다.

그럴때는 optgroup을 사용하면 된다.

그럼 이제 "Select Box"의 주요(많이 쓰이는) 속성에 대해 알아 보자. (몇 개 안된다)

속성	값	설명
size	number	지정된 숫자 만큼 "Option"을 보여 주고 보여지는 개수 만큼 세로로 커진다. 세로로 커진다는 점에서 Style의 Height와 유사하겠지만, size 지정 없이 height 값만 지정하면 하나의 option 만 크게 보일 것이다. 단 size를 2이상으로 하고 height를 같이 지정하면 height 만큼 세로길이가 고정된다. 위의 카테고리 관리에 사용 "Select Box"는 size="5"로 설정했고 5개의 "Option"을 보여준다.
multiple	[Boolean]	여러개의 option을 선택할 수 있다. Select Box는 Radio와 마찬가지로 1개의 값만 선택하는 것이 기본이지만 multiple 속성을 지정하면 여러개의 option을 선택할 수 있다. 컨트롤을 누른 상태에서 마우스로 선택 하면 된다.
disabled	[disabled]	다른 input 과 마찬가지로 비활성화 한다.
autofocus	[autofocus]	페이지를 열면 자동으로 포커싱된다.
form	form-id	지정된 ID의 form에 포함된다.
required	[required]	필수 요소 검사, 폼이 전송될때 값이 없으면 경고메시지 출력