SELECT, OPTGROUP, OPTION elements

<SELECT> <OPTGROUP> <OPTION>...</OPTGROUP> </SELECT>
◀ ■ ▶

SELECT element는 리스트박스와 콤보 박스를 만들 수 있도록 해 준다. 시작과 끝내는 태그로 이루어지며, 각각의 메뉴는 OPTION element로 넣어준다. 관련있는 OPTION들은 OPTGROUP으로 묶을 수 있다.

<FORM action="https://somesite.com/prog/someprog" method="post">
 <SELECT name=computer>
     <OPTGROUP label=TriGem>
       <OPTION label=1 value=tg1000>삼보 1000
       <OPTION label=2 value=tg2000>삼보 2000
       <OPTION label=3 value=tg3000>삼보 3000
     </OPTGROUP>
     <OPTGROUP label=Samsung>
       <OPTION label=1 value=ss1000>삼성 1000
       <OPTION label=2 value=ss2000>삼성 2000
     </OPTGROUP>
     <OPTGROUP label=LG>
       <OPTION label=1 value=lg1000>엘지 1000
       <OPTION label=2 value=lg2000>엘지 2000
     </OPTGROUP>
 </SELECT>
</FORM> 이렇게 나와요

브라우저에 따라 일반 프로그램의 메뉴와 같이 점차 펼쳐지는 것처럼 보일 수도 있다.

속성

SELECT

name, size, multiple, disabled, tabindex
onfocus, onblur, onchange

size = 숫자

한 번에 보이는 메뉴의 갯수이다.

multiple

Multiple 속성이 있으면, Ctrl이나 Shift 키를 누른 채 두 개 이상의 메뉴를 동시에 선택할 수 있다.

OPTGROUP

disabled, label
id, class, title, style
onfocus, onblur, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

label = 문자열

옵션 그룹에 대한 이름표이다.

OPTION

disabled, selected, label, value
id, class, title, style
onfocus, onblur, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

◀ ■ ▶