<option>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Please take two minutes to fill out our short survey.
HTML <option> 요소는 <select>, <optgroup>, <datalist> 요소의 항목을 정의합니다. 그러므로, <option>을 사용해 팝업 메뉴 등 목록에서 하나의 항목을 나타낼 수 있습니다.
시도해 보기
<label for="pet-select">Choose a pet:</label>
<select id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
label {
font-family: sans-serif;
font-size: 1rem;
padding-right: 10px;
}
select {
font-size: 0.9rem;
padding: 2px 5px;
}
| 콘텐츠 카테고리 | 없음. |
|---|---|
| 가능한 콘텐츠 |
텍스트. 이스케이프 처리한 문자(é 등)도 가능.
|
| 태그 생략 |
여는 태그는 필수입니다. 바로 뒤따르는 요소가
<optgroup>, 다른
<option>이거나, 자신이 부모의 마지막 자식이라면 닫는
태그를 생략할 수 있습니다.
|
| 가능한 부모 요소 |
<select>, <optgroup>,
<datalist> 요소.
|
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | HTMLOptionElement |
특성
이 요소는 전역 특성을 포함합니다.
disabled-
지정한 경우 이 옵션을 선택할 수 없습니다. 브라우저에서, 비활성화 옵션은 주로 회색으로 보이며, 클릭과 포커스 등 모든 이벤트를 받지 않습니다.
<option>에disabled특성을 추가하지 않더라도,<optgroup>등 조상 요소로 인해 비활성화될 수 있습니다. label-
옵션의 뜻을 나타내는 텍스트. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.
selected-
지정한 경우 초기에 이 옵션을 선택한 상태로 설정합니다.
multiple를 지정하지 않은<select>요소의 자손인 경우, 하나의<option>만selected특성을 가질 수 있습니다. value-
양식 데이터를 구성할 때 사용할 값. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.
예제
<select> 요소를 참고하세요.
명세
| Specification |
|---|
| HTML # the-option-element |