[html] 드롭다운 목록 만들기 - <select>, <optgroup>, <option>

1. <select> 태그

- 한 개 이상의 <option>요소를 포함해야 한다.

속성	내용
autofocus	페이지 로드 시 자동 포커스 지정
disable	포커스, 선택, 변경 등 조작 불가, 서버 전송 불가
mutiple	ctrl 키 이용 복수선택 가능토록 지정
size	화면에 표시된 메뉴 항목 개수 지정
required	필수 선택 요소 지정

 

2. <option> 태그

- <select> 요소의 자식요소로 목록에 표시되는 각 항목을 지정하기 위해 사용한다.

속성	내용
selected	화면에 표시될 때 기본으로 선택될 옵션을 지정
value	옵션을 선택했을 때 서버로 넘겨질 값을 지정

 

3. <optgroup> 태그

- <option> 태그의 여러 항목들을 그룹으로 묶어야 할 때 사용한다. (label 속성으로 그룹의 제목 작성가능하며 필수 속성이다.)

 

예시 )

  <select id="list1">
    <optgroup label="그룹1">
      <option>목록1</option>
      <option>목록2</option>
    </optgroup>

    <optgroup label="그룹2">
      <option selected>목록3</option>
      <option>목록4</option>
      <option>목록5</option>
      <option>목록6</option>
    </optgroup>
  </select>