[HTML] select 태그(박스) 사용방법

오늘은 셀렉트박스(Selectbox UI)는 웹사이트에서 굉장히 많이 사용되는 인터페이스 UI 중 하나입니다. 간단하게 선택하여 사용하는 select 태그를 사용한 방식과 콤보박스라 불리는 좀 더 기능적 특징을 가진 UI로 구분할 수 있습니다. 오늘은 select 태그를 사용한 방법에 대하여 예제와 함께 알아보도록 하겠습니다.

# select 태그 선택폼 알아보기

먼저 select 태그는 방문자로 하여금 손쉽게 원하는 값을 선택할 수 있는 입력폼을 제공합니다. 그래서 방문자로 부터 입력값을 전달받아 서버에 저장하기 위해 통신할 때 간편한 인터페이스를 제공할 수 있습니다.

아래 있는 select 태그는 좋아하는 과일을 손쉽게 선택할 수 있는 가장 기본적인 형태의 인터페이스 모습입니다. 보시는 것처럼 간단하게 원하는 옵션값 중 선택이 가능하도록 UI를 제공합니다. 사용자 역시 해당 인터페이스에 매우 친숙하며 우측의 화살표를 통해 선택이 가능하다는 것을 손쉽게 인지할 수 있습니다.

바나나사과파인애플

위 코드의 경우 파인애플을 기본값으로 설정하였습니다. selected 속성값을 사용하여 input 태그에 함께 설정할 경우 위와 같이 페이지 로딩시 해당 옵션값이 지정되며 사용자가 아무것도 선택하지 않은 경우에 default로 사용할 수 있는 매우 자주 사용되는 속성입니다.  select 박스를 구현할 경우 반드시 알아두셔야 하는 기본 속성 중 하나입니다.


 

# select 태그 예제소스 코드보기

아래는 이를 사용하여 만들어본 간단한 예제코드입니다. 방문자는 세가지 옵션값중 원하는 값을 선택하게됩니다.

! 선택옵션 내부에 추가 카테고리 만들는 방법

optgroup 태그를 사용하면 아래처럼 내부에 카테고리를 추가하여 만들 수도 있습니다. 아래 select 박스를 클릭해보세요.

바나나사과파인애플사이다콜라

위 코드는 아래와 같습니다.

위에 사용된 optgroup 태그를 사용하면 하위에 카테고리 단위를 추가할 수 있습니다. 새로운 하위 depth, 즉 그룹 옵션이 생성되죠.

# 서버에서 값을 불러와 select 태그에 적용하기

만약에 자바스크립트를 사용해 서버값을 받아와 페이지를 열었을때 선택하게 하려면 어떻게 해야할까요? 제이쿼리를 이용해서도 쉽게 구현할 수 있습니다. 자세한건 아래 링크를 참고하세요!

​​​​​​​
* 더 알아보려면 아래 링크를 클릭하세요.
http://webisfree.com/2014-01-12/[javascript]-select-태그의-값을-순서-index로-찾기-selectedindex