<select>

개요

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

사용 문맥

속성

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

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입니다.

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>

결과

Value 1Value 2Value 3

참고

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

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

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

사양

브라우저 호환성

[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를 무시합니다.

같이 보기

• Other form-related elements: <form>, <legend>, <label>, <button>, <option>, <datalist>, <optgroup>, <fieldset>, <textarea>, <keygen>, <input>, <output>, <progress> and <meter>.