HTML <select>
요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.
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.
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.
위의 예제는 일반적인 <select>
사용법을 시연합니다. <label>
과 연결해 접근성을 향상할 수 있도록 id
특성을, 서버로 전송할 데이터의 이름을 위해 name
특성을 적용했습니다. 메뉴의 각 옵션은 <select>
안의 <option>
으로 정의합니다.
모든 <option>
은 자신이 선택됐을 때 값으로써 사용할 value
특성이 필요합니다. 그러나 value
특성을 지정하지 않은 경우, 대신 자기 안의 텍스트를 값으로 사용합니다. selected
특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러옵니다.
<select>
요소를 조작할 때 사용할 수 있는 여러가지 고유 특성이 존재합니다. multiple
특성을 사용하면 다수의 항목을 동시에 선택할 수 있고, size
특성은 한 번에 노출되는 항목의 수를 조절할 수 있습니다. required
, disabled
, autofocus
등 일반적인 양식 입력 요소의 특성도 사용할 수 있습니다.
<option>
요소를 <optgroup>
요소 안에 배치하면 드롭다운 내에서 옵션 그룹을 나눌 수 있습니다.
For further examples, see The native form widgets: Drop-down content.
특성
이 요소는 전역 특성을 포함합니다.
autocomplete
- 사용자 에이전트의 자동완성 기능을 지원하는
DOMString
. 가능한 값의 전체 목록과, 자동완성의 상세 사용법은 HTMLautocomplete
특성 문서를 참고하세요. 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입니다.
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 |
브라우저 호환성
BCD tables only load in the browser