MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

개요

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  

브라우저 호환성

기능 Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
required 속성 (Yes) 4.0 (2.0) 10 (Yes) (Yes)
기능 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) [1] 1.0 (1.0) [2] (Yes) (Yes) (Yes)
required 속성 (Yes) 4.0 (2.0) No support (Yes) (Yes)

 

[1] 안드로이드 4.1의 브라우저 앱에서 (그 이후 버전에서도 어쩌면), background, border, 또는 border-radius 스타일이 <select>에 적용되면, <select> 측면의 메뉴 인디케이터 삼각형이 표시되지 않는 버그가 있습니다.

[2] 안드로이드의 파이어폭스에서, 기본값으로, 모든 <select multiple> 요소들에 background-image 그라디언트를 설정하십시오. background-image: none을 사용하면서 사용할 수 없을 수도 있습니다.

[3] Historically, Firefox has allowed keyboard and mouse events to bubble up from the element to the parent <select> element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and 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.

-webkit-appearance가 적절한 값으로 덮어씌워지지 않는 한, 크롬과 사파리는 둘 다 <select> 요소의 border-radius를 무시합니다.

같이 보기

문서 태그 및 공헌자

 이 페이지의 공헌자: simcheolhwan, azunyan3
 최종 변경: simcheolhwan,