<select>

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

HTML select (<select>) 요소는 옵션들의 메뉴가 존재하는 컨트롤을 나타냅니다. 메뉴에 있는 옵션들은 <option> 요소에 의해 표현되며, <optgroup> 요소에 의해 묶일 수 있습니다. 옵션들은 사용자를 위해 미리 선택될 수 있습니다.

사용 문맥

콘텐츠 범주 flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element
허용되는 콘텐츠 0개 이상의 <option> 또는 <optgroup> 요소.
태그 생략 없음, 시작하는 태그와 끝나는 태그가 강요됩니다.
허용되는 부모 요소 any element that accepts phrasing content

속성

이 요소는 글로벌 속성을 포함합니다.

autofocus HTML5
이 속성은 페이지가 로드되면, 예를 들어 다른 컨트롤에 타이핑함으로써 사용자가 덮어씌우지 않는 한, form 컨트롤이 반드시 input에 포커스를 가지도록 할 수 있게 합니다. 문서 내에서 오직 하나의 form 요소만이 부울 값인 autofocus 속성을 가질 수 있습니다.
disabled
이 부울 속성은 사용자가 컨트롤과 상호작용할 수 없음을 나타냅니다. 만약 이 속성이 명시되지 않으면, 컨트롤은 예를들면 fieldset처럼, 포함하는 요소로부터 설정을 상속합니다. 만약 disabled 속성을 가진 포함하는 요소가 없으면, 컨트롤은 사용가능합니다.
form HTML5
select요소가 연관된 form 요소 (요소의 form owner). 이 속성이 명시되면, 그 값은 같은 문서 내에 있는 form 요소의 ID이어야 합니다. 이는 꼭 그들의 form 요소들에 하위뿐만이 아닌, 문서 내의 어디에든 select 요소들을 위치시킬 수 있게 합니다.
multiple
이 부울 속성은 목록에서 다중 옵션들이 선택될 수 있음을 나타냅니다. 명시되지 않으면, 한 번에 오직 하나의 옵션만 선택될 수 있습니다.
name
컨트롤의 name.
required HTML5
비어있지 않은 문자열 값이 반드시 선택되어야 하는 옵션을 나타내는 부울 속성.
size
컨트롤이 스크롤된 목록 상자로 표현되면, 이 속성은 목록에서 한 번에 볼 수 있는 행의 개수를 나타냅니다. 브라우저들은 스크롤된 목록 상자로서 select 요소들을 표시할 필요가 없습니다. 기본 값은 0입니다.
파이어폭스 노트: HTML5 사양에 따라, size의 기본 값은 1이어야합니다; 하지만, 실제로, 이는 몇몇 웹사이트를 깨뜨리고, 다른 브라우저도 지금 그렇게 하고 있지 않아서, Mozilla는 파이어폭스에서 당분간 계속 0을 return하기로 했습니다.

DOM 인터페이스

이 요소는 HTMLSelectElement 인터페이스를 구현합니다.

예제

<!-- 처음에 두 번째 값이 선택될 것입니다 -->
<select name="select">
  <option value="value1">Value 1</option> 
 <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

결과

참고

이 요소의 내용은 static하며 editable하지 않습니다.

다음은 editable 옵션을 가진 select 목록 어떻게 시뮬레이트하는지의 예제이지만, 스크린 리더들과 보조 장치들은 form을 정확하게 해석할 수 없음을 주의하십시오; 정확한 요소가 사용되면, 이 예제는 유효하지 않은 html입니다.

radiobox들과 textbox들의 <fieldset>를 통한 editable select의 예제입니다. (JavaScript 없이, 순수한 CSS로 쓰여짐)

명세

사양 상태 주석
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 YesFirefox 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 YesFirefox 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 YesFirefox 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 YesFirefox 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 YesFirefox 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 YesFirefox 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 YesFirefox 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 YesFirefox 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.

같이 보기