설명
The select (<select>) HTML element represents a control that presents menu of options. The options within the menu are represented by <option> elements, which can be grouped by <optgroup> elements. Options can be pre-selected for the user.
<select> 요소는 사용자가 옵션을 선택할 수 있는 드롭다운리스트를 생성한다. 각 선택옵션들은 <option> 요소로 표현되며, <optgroup> 요소로 그룹지어질 수 있다. 또한, 옵션들은 기본값 설정이 가능하다.
Usage Context
| Permitted content |
Zero or more <option> or <optgroup> elements. |
| Tag omission | none, both the start tag and the end tag are mandatory |
| Permitted parent elements | any element that accepts phrasing content |
| Normative document | HTML5, section 4.10.9 (HTML4.01, section 17.6) |
속성
이 엘리먼트는 전역속성을 지원한다.
autofocus - HTML5
This attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean.
이 속성은 저작자로 하여금 페이지가 로딩되었을때 해당 폼 컨트롤에 자동으로 커서가 가있도록 할 수 있게 해준다. 이는 사용자가 다른 컨트롤에 타이핑을 한다든지 하는 동작에 의해 무시될 수 있다. 한 페이지에서 오직 한개의 폼 컨트롤만이 autofocus 속성을 가질 수 있다. autofocus는 불리언 속성이며, 아래 세가지 방법으로 사용가능하다. (http://www.w3schools.com/html5/att_select_autofocus.asp 참고했습니다.)
<select autofocus="autofocus"> <select autofocus> <select autofocus="">
disabled
This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example fieldset; if there is no containing element with the disabled attribute set, then the control is enabled.
이 속성이 설정되면 사용자는 컨트롤을 사용할 수 없게 된다. 컨트롤에 해당 속성이 설정되지 않았더라도 그것이 속한 부모 컨트롤-예를 들면, fieldset 요소-에 disabled 속성이 설정되어있을 경우 자식 컨트롤도 사용할 수 없는 상태가 된다. 이 속성도 불리언 속성이며, 사용법은 다음과 같다. (http://www.w3schools.com/html5/att_select_disabled.asp 참고했습니다.)
<select disabled="disabled"> <select disabled> <select disabled="">
form - HTML5
The form element that the select element is associated with (its "form owner"). The value of the attribute must be an ID of a form element in the same document. If this attribute is not specified, the select element must be a descendant of a form element. This attribute enables you to place select elements anywhere within a document, not just as descendants of their form elements.
form 속성은 select 속성이 연계되어있는 form 요소를 가리킨다. 이 속성의 값은 반드시 같은 문서내에 존재하는 연계된 form 요소의 ID여야한다. 이 속성이 특정되지 않으면, select 요소는 반드시 form 요소의 자식 요소로서 열린 태그(<form>)와 닫힌 태그(</form> 사이에 위치하여야하며, 이 속성이 특정될 경우 select 요소는 문서내 아무곳에나 위치할 수 있다.
multiple
This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.
이 불리언 속성은 해당 드롭다운리스트가 다중선택을 지원하는지 여부를 가리킨다. 속성이 특정되지 않을 경우 기본값으로 한번에 한가지 옵션만 선택할 수 있다.
name
The name of the control.
<select> 요소의 이름이다.
required - HTML5
A Boolean attribute indicating that an option with a non-empty string value must be selected.
이 불리언 속성은 선택된 옵션이 반드시 값을 가져야한다는 것을 표시한다. 다시 말해서, 이 속성이 지정된 경우 <option value="">와 같은 옵션은 선택될 수 없다. (크롬15, 파폭7 에서 테스트해보았는데 이 속성은 제대로 동작하지 않네요.)
size
If the control is presented as a scrolled list box, this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select elements as a scrolled list box. The default value is 0.
이 컨트롤 요소가 스크롤이 되는 리스트로 표현될 경우, size 속성으로 한번에 몇줄이 보이도록 하는지 조정할 수 있다.
Note :
According to the HTML5 specification, the default value for size should be 1; however, in practice, this has been found to break some web sites, and no other browser currently does that, so we have opted to continue to return 0 for the time being.
참고:
HTML5 명세에 따르면, size 속성의 기본값은 1이다. 하지만, 실제로는 기본값 1을 사용할 경우, 몇몇 웹싸이트들이 제대로 보여지지 않았다. 모든 브라우저들은 현재 HTML5의 명세를 따르고 있지 않고, 우리도 현재로선 예전 그대로 0을 기본값으로 사용한다. (여기서 우리는 모질라 재단인가요?)
예제
<!-- The second value will be selected initially --> <select name="select"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3">Value 3</option> </select>
<!-- 두번째 옵션이 초기값으로 선택됩니다 --> <select name="select"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3">Value 3</option> </select>
DOM Interface
This element implements the HTMLSelectElement interface.
이 요소는 DOM의 인터페이스 중 HTMLSelectElement를 구현했다. DOM은 HTML을 프로그래밍적으로 제어하기 위한 표준이다.
호환성
| 기능 | 구글크롬 | 파이어폭스Gecko) | 인터넷 익스플로러 | Opera | Safari |
|---|---|---|---|---|---|
| 기본적인 지원 | 1.0 | 1.0 (1.7 or earlier) | 지원 | 지원 | 지원 |
| required attribute | 지원 | 4.0 (2.0) | 지원 | 지원 |
| 기능 | 안드로이드 | 파이어폭스 모바일(Gecko) |
인터넷 익스플로러 모바일 |
오페라 모바일 | 사파리 모바일 |
|---|---|---|---|---|---|
| 기본적인 지원 | 지원 | 1.0 (1.0) | 지원 | 지원 | 지원 |
| required attribute | 지원 | 4.0 (2.0) | 지원 | 지원 |
참고
- https://developer.mozilla.org/en/HTML/Element/select
-
Other form-related elements:
<form>,<legend>,<label>,<button>,<option>,<datalist>,<optgroup>,<fieldset>,<textarea>,<keygen>,<input>,<output>,<progress>and<meter>.
