<select>

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

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.

사용 문맥

속성

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

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로 쓰여짐)

명세

브라우저 호환성

같이 보기

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