<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 |
브라우저 호환성
Loading…