HTML select, option, optgroup 태그 – 콤보(셀렉트) 박스

폼(form) 양식 중에서 사용자로부터 input 태그와 같이 직접 입력 값을 받는 게 아니라 여러 옵션 중에서 선택하여 받아야 되는 경우도 있습니다. 그럴 경우에는 select, option 태그를 사용하여 드롭다운 목록(콤보 박스)으로 만들면 됩니다. 그럼 select, option, optgroup 태그에 대해서 알아보죠.

select, option 태그

1. 사용법

<select>
<option value=’값 1″> 목록 1 </option>
<option value=’값 2″> 목록 2 </option>
…
</select>

2. select 태그 주요 속성

속성	설명
multiple	드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용. 지정하지 않은 경우에는 하나만 선택 가능
size	드롭다운 목록에서 한 번에 보일 항목의 개수를 지정
required	필수 입력 처리
disabled	비활성화 처리
autofocus	페이지 로드 할때 커서 이동

3. option 태그 주요 속성

속성	설명
value	해당 항목이 선택될 때 서버로 넘겨줄 값을 지정
selected	페이지가 로드될 때 드롭다운 목록 중에서 기본적으로 선택되어지는 항목을 지정
label	해당 항목의 명칭
disabled	비활성화 처리

사용 예제 1

1. 소스 코드

<!DOCTYPE html>
<html>
<head>
     <title>select, option 태그</title>
</head>
<body>
     <label id="category">유용한 카테고리 선택 :</label>
     <select id="category">
          <option value="">--- 선택 ---</option>
          <option value="1" selected>IT 정보</option>
          <option value="2">IT 공부</option>
          <option value="3">생활정보</option>
          <option value="4">재테크</option>
     </select>
     <br><br>
     <label id="category2">유용한 카테고리 선택 :</label>
     <select id="category2" multiple>
          <option value="1" selected>IT 정보</option>
          <option value="2" selected>IT 공부</option>
          <option value="3">생활정보</option>
          <option value="4">재테크</option>
     </select>
</body>
</html>

2. 실행 결과 화면

☞ 여러 항목을 선택할 때에는 Ctrl, Shift 키를 사용하시면 됩니다.

사용 예제 2 : optgroup 태그 사용

▶ optgroup 태그 : 드롭다운 목록에서 항목을 그룹핑을 할 수 있습니다.

1. 소스 코드

<!DOCTYPE html>
<html>
<head>
     <title>optgroup 태그</title>
</head>
<body>
     <label id="category">유용한 카테고리 선택 :</label>
     <select id="category">
          <optgroup label="IT정보">
               <option value="1">윈도우</option>
               <option value="2">웹브라우저</option>
               <option value="3">MS 오피스</option>
               <option value="4">구글</option>
          </optgroup>
          <optgroup label="IT공부">
               <option value="5">MS SQL Server</option>
               <option value="6">ASP, VBS</option>
               <option value="7">Front-end</option>
               <option value="8">Back-end</option>
          </optgroup>
     </select>
</body>
</html>