SELECT Element

Select element는 선택하면 아래나 위로 펼쳐져 나오는 목록(펼침 목록이라고도 함.)의 최상위 element입니다. 아래의 DTD Table과 속성을 우선 보시겠습니다.

legend : optional, forbidden, empty, deprecated, loose dtd, frameset dtd  [표 보는 방법]

element	start tag	end tag	empty	deprecated	dtd
SELECT
OPTGROUP
OPTION		O

Select Element
name	Scripting 할 때 호출할 이름.
multiple	여러 개를 선택 할 수있게 할 때 사용 합니다. 이 속성을 사용하면 Drop down box가 생기지 않고 textarea 같은 스크롤 하는 box가 생깁니다.
size	행의 갯수를 지정합니다. Input element에서는 가로의 길이를 지정한 것과 다르져. 기본값이 1이기 대문에 size="1" 은 주나 마나고 2 이상이 되면 이 때 부터 multiple 과 같은 box가 생깁니다.
disabled	이 속성은 Input element 와 동일 하므로 좌측 메뉴의 Input Element를 참조하고, 거기까지 마우스 끌고가기 귀찮다면 요기를 누르시지효오~. 쬐끔 빠릅니다.

Option Element 는 Select Drop down box 에 들어갈 목록 들입니다. 맨 위의 DTD Table에서 End Tag이 O(Optional)로 표기되어 있습니다만, 반드시 End Tag으로 닫아주는 습관을 기르는게 멀지 않은 장래를 위해 좋답니다.

Option Element도 원래는 disabled라는 속성이 있는데 듣지않고, Label 속성으로 Drop down 항목의 이름을 표시하는데 역시 듣지 않아서 아래의 표에서는 빼겠습니다. 그럼 어떤 부분이 얼굴마담 역할을 하느냐 하면 <option>얼굴마담</option> 과 같이 Option Tag 속에 있는 문자가 목록에 나오게 됩니다.

Option Element
value	Scripting으로 선택된 값을 처리하는 실제 입력 값입니다.
selected	checkbox와 radio button 같이 문서가 출력되면서 Drop down box에 보여질 항목입니다. 마찬가지로 여러 항목에 사용하면 사용한 마지막 항목이 유효합니다.

Optgroup... 벌써 눈치가 따~악 오지 않습니까? 앞의 3글자 Opt 는 Option의 Opt 가 되겠습니다. 즉, Option group 이라는 뜻이져. 즉, 위의 Option Element 들을 group 별로 구분해 주는 역할을 합니다. 왜 때로는 그룹 별로 구분할 필요가 생기는지는 아래의 예제를 보면 금방 눈치 채실 겁니다.

Optgroup Element
Label	Drop down box 속에서 group 제목이 될 문자들이 값이 되져.

<form name="my_form">
    <select name="fiction">
            <option selected="selected">
            어느 회사의 부서별 과장, 차장 명단 - 먼저 등장하는 인물이 과장임... 실제 인물 아님...
            </option>
        <optgroup label="인사과">
            <option value="인사한">인사한</option>
            <option value="인사해">인사해</option>
        </optgroup>
        <optgroup label="자재과">
            <option value="건자재">건자재</option>
            <option value="목자재">목자재</option>
        </optgroup>
        <optgroup label="총무과">
            <option value="총무기?">총무기?</option>
            <option value="총흉기!">총흉기!</option>
        </optgroup>
    </select>
</form>

<form name="my_form">
    <select name="fiction" multiple="multiple" size="10">
            <option selected="selected">
            어느 회사의 부서별 과장, 차장 명단 - 먼저 등장하는 인물이 과장임... 실제 인물 아님...
            </option>
        <optgroup label="인사과">
            <option value="인사한">인사한</option>
            <option value="인사해">인사해</option>
        </optgroup>
        <optgroup label="자재과">
            <option value="건자재">건자재</option>
            <option value="목자재">목자재</option>
        </optgroup>
        <optgroup label="총무과">
            <option value="총무기?">총무기?</option>
            <option value="총흉기!">총흉기!</option>
        </optgroup>
    </select>
</form>

위의 Multiple 사용 예제에서는 전체 항목이 제목 포함해서 10개 이므로 size="10"으로 해서 스크롤을 아예 생기지 않게 지정했는데 10 이하의 값을 주면 스크롤바가 생깁니다. 의심이 나시면 위의 소스를 복사한 다음 코드 실행기에서 실행해 보시져...^^ 제 생각이지만 아주 많은 항목이 아니라면 스크롤이 없는게 나을 듯 싶군요.

위의 예제에서 사용한 Multiple 속성은 여러개를 선택할 수 있습니다. 연달아 있는 항목을 선택하려면 일단 1개의 항목을 선택한 후 shift key를 누른 상태에서 한 꺼번에 여러개를 선택하면 되고, 떨어져 있는 항목을 선택하려면 마찬 가지로 먼저 1개의 항목을 선택한 후 Ctrl key를 누른 상태에서 선택합니다.