..

Search

<option>

HTML <option> 태그

정의 및 특징

<option> 태그는 옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 하나의 옵션을 정의할 때 사용합니다.

 

이러한 <option> 요소는 <select> 요소나 <datalist> 요소 내부에만 위치할 수 있습니다.

<option> 요소는 아무런 속성도 명시하지 않은 채 사용할 수 있지만, 서버로 제출되는 값을 명시하는 value 속성은 명시하는 것이 일반적입니다.

만약 옵션의 개수가 많다면, <optgroup> 요소를 사용하여 관련된 옵션들을 좀 더 보기 좋게 서로 묶어 줄 수 있습니다.

예제
<select>
    <option value="americano">아메리카노</option>
    <option value="caffe latte">카페라테</option>
    <option value="cafe au lait">카페오레</option>
    <option value="espresso">에스프레소</option>
</select>

코딩연습 ▶

지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera
<option> 1.0 지원함 지원함 1.0 지원함 지원함

사용할 수 있는 속성

속성명   속성값 설명

disabled

  

disabled

해당 옵션이 비활성화됨을 명시함.

label

 

텍스트

해당 옵션의 라벨(label)을 명시함.

selected

  

selected

페이지가 로드될 때 옵션 중에서 미리 선택되어지는 옵션을 명시함.

value

   값

해당 옵션이 선택될 때 서버로 제출되는 값을 명시함.

DOM 인터페이스

[NamedConstructor=Option(optional DOMString text = "", optional DOMString value, optional boolean defaultSelected = false, optional boolean selected = false)]

interface HTMLOptionElement : HTMLElement {

  attribute boolean disabled;

  readonly attribute HTMLFormElement? form;

  attribute DOMString label;

  attribute boolean defaultSelected;

  attribute boolean selected;

  attribute DOMString value;

 

  attribute DOMString text;

  readonly attribute long index;

};

연습문제