<select>

HTML <select> 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

위의 예제는 일반적인 <select> 사용법을 시연합니다. <label>과 연결해 접근성을 향상할 수 있도록 id 특성을, 서버로 전송할 데이터의 이름을 위해 name 특성을 적용했습니다. 메뉴의 각 옵션은 <select> 안의 <option>으로 정의합니다.

모든 <option>은 자신이 선택됐을 때 값으로써 사용할 value 특성이 필요합니다. 그러나 value 특성을 지정하지 않은 경우, 대신 자기 안의 텍스트를 값으로 사용합니다. selected 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러옵니다.

<select> 요소를 조작할 때 사용할 수 있는 여러가지 고유 특성이 존재합니다. multiple 특성을 사용하면 다수의 항목을 동시에 선택할 수 있고, size 특성은 한 번에 노출되는 항목의 수를 조절할 수 있습니다. required, disabled, autofocus 등 일반적인 양식 입력 요소의 특성도 사용할 수 있습니다.

<option> 요소를 <optgroup> 요소 안에 배치하면 드롭다운 내에서 옵션 그룹을 나눌 수 있습니다.

For further examples, see The native form widgets: Drop-down content.

특성

이 요소는 전역 특성을 포함합니다.

autocomplete

사용자 에이전트의 자동완성 기능을 지원하는 DOMString. 가능한 값의 전체 목록과, 자동완성의 상세 사용법은 HTML autocomplete 특성 문서를 참고하세요.

autofocus

지정한 경우, 페이지를 불러왔을 때 자동으로 포커스를 부여합니다. 문서 내에서 하나의 양식 요소만 autofocus 특성을 가질 수 있습니다.

disabled

지정한 경우, 사용자와 <select> 요소의 모든 상호작용을 막습니다. 지정하지 않은 경우에도 <fieldset> 등 부모 요소의 disabled 특성을 상속하므로 비활성 상태가 될 수 있습니다.

form

<select>와 연결할 <form> 요소("양식 소유자"). 같은 문서에 존재하는 <form> 요소의 id 특성 값을 사용해야 합니다. form 특성을 지정하지 않았으나 조상 중 <form> 요소가 존재하면 해당 <form>과 연결됩니다.

form 특성을 사용하면 <select>를 <form> 요소에 넣지 않고도 연결할 수 있고, 조상 중 <form>이 있더라도 소유자를 재정의할 수 있습니다.

multiple

지정한 경우, 메뉴에서 다수의 옵션을 선택할 수 있습니다. 지정하지 않은 경우 하나만 선택 가능합니다. 대부분의 브라우저는 multiple 특성이 존재하면 드롭다운 메뉴 대신 스크롤 가능한 목록 상자를 보여줍니다.

name

컨트롤의 이름.

required

옵션 중 값으로 비어있지 않은 문자열을 값으로 하는 항목을 반드시 선택해야 함을 나타냅니다.

size

<select>를 (multiple 특성 사용 등의 이유로) 스크롤 가능한 목록 상자로 표현할 때 지정한 경우, 목록에서 한 번에 볼 수 있는 옵션 줄 수를 나타냅니다. 브라우저가 <select> 요소를 반드시 스크롤 가능한 목록 상자로 표현해야 하는 것은 아닙니다. 기본값은 0입니다.

CSS 스타일링

<select> 요소는 CSS를 사용해 스타일을 적용하기 어렵기로 유명합니다. 물론 박스 모델이나 글씨체 등 일부분은 다른 요소처럼 바꿀 수 있으며, appearance 속성을 사용하면 기본 시스템 외형을 제거할 수도 있습니다.

그러나 <select> 요소의 내부 구조는 복잡해 통제하기 힘들며, 브라우저간의 차이로 인해 일관적이지 않은 결과가 나올 수도 있습니다. 요소의 모든 부분을 통제해야 할 경우 적합한 스타일링 방법을 제공하는 라이브러리를 고려하세요. 아니면 다른 요소와 JavaScript, WAI-ARIA를 사용해 완전히 별도의 드롭다운 메뉴를 만들어보세요.

예제

기본 메뉴

<!-- 두 번째 값이 처음부터 선택된 상태 -->
<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

여러 기능을 갖춘 복잡한 메뉴

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>

• multiple 특성으로 인해 여러 옵션을 같이 선택할 수 있습니다.
• size 특성으로 인해 최대 4개의 옵션만 보입니다.
• <optgroup> 요소를 사용해 옵션을 두 개의 분리된 그룹으로 나눴습니다. 옵션 그룹은 순전히 시각적인 구분으로, 보통 굵은 글씨체의 옵션명 및 들여쓰기한 옵션 구성원으로 표현합니다.
• "Hamster" 옵션에는 disabled 특성이 있으므로 선택할 수 없습니다.

기술 요약

명세

브라우저 호환성

같이 보기

• <select>가 발사하는 이벤트: change, input