<option>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
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 |