<select>

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

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

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

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

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

특성

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

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입니다.
참고: HTML5 명세에 따르면 size의 기본값은 1이어야 합니다. 그러나 실제로 기본값을 1로 적용하면 일부 웹 사이트가 망가지는 것으로 밝혀졌으며 어떠한 브라우저도 기본값으로 1을 사용하지 않습니다. Mozilla도 당분간 Firefox의 기본값을 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 특성이 있으므로 선택할 수 없습니다.

기술 요약

콘텐츠 카테고리 플로우 콘텐츠, 구문 콘텐츠, 대화형 콘텐츠, 양식 관련 콘텐츠(나열됨, 레이블 가능, 초기화 가능, 제출 가능).
가능한 콘텐츠 0개 이상의 <option> 또는 <optgroup> 요소.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 menu
DOM 인터페이스 HTMLSelectElement

명세

Specification Status Comments
HTML Living Standard
The definition of '<select>' in that specification.
Living Standard
HTML5
The definition of '<select>' in that specification.
Recommendation
HTML 4.01 Specification
The definition of '<select>' in that specification.
Recommendation

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
selectChrome Full support Yes
Notes
Full support Yes
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent <select> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode the <select> element is displayed as a drop-down list. The behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <option> elements for events, you should watch for change events on <select>. See bug 1090602 for details.
IE Full support YesOpera Full support YesSafari Full support Yes
Notes
Full support Yes
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes In the Browser app for Android 4.1 (and possibly later versions), there is a bug where the menu indicator triangle on the side of a <select> will not be displayed if a background, border, or border-radius style is applied to the <select>.
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Firefox for Android, by default, sets a background-image gradient on all <select multiple> elements. This can be disabled using background-image: none.
Opera Android Full support YesSafari iOS Full support Yes
Notes
Full support Yes
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Samsung Internet Android Full support Yes
Notes
Full support Yes
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
autofocusChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
disabledChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
formChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
multipleChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
nameChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
requiredChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
sizeChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

같이 보기