<option> 태그의 정의 및 사용법

<option> 태그는
옵션 목록을 제공하는 <select>, <datalist> 태그의 옵션 항목을 나타냅니다.

<select> 태그 내에서는 <option> 태그들을 <optgroup> 태그로 그룹화할 수 있습니다.

이 태그는 주로 사용자에게 옵션의 선택지를 제공하는 데 사용합니다.

예제

<option> 태그가 <select>, <optgroup> , <datalist> 태그들과 어떻게 사용되는지 예제를 통해 설명합니다.

주의할 점으로 <option>은 이 세 가지 태그 내에서만 사용된다는 것입니다.

<select> 태그와의 관계

<select> 태그는 흔히 '드롭다운 목록' 또는 '셀렉트 박스'라고 부르는 옵션 메뉴를 생성하는 역할을 하며, <option> 태그들은 각각의 옵션을 나타냅니다.

HTML 
<label for="user-color" style="display: block;">색상 선택</label>
<select id="user-color">
    <option value="" disabled selected>좋아하는 색상 선택</option>
    <option value="red">빨강</option>
    <option value="blue">파랑</option>
    <option value="yellow">노랑</option>
    <option value="green">초록</option>
</select>
실제 적용된 모습

사용자는 이 컨트롤로 원하는 옵션을 선택할 수 있습니다.

<optgroup> 태그와의 관계

<select> 태그 내에서는 <option> 태그들을 <optgroup> 태그로 그룹화할 수 있습니다.
<optgroup> 태그로 관련된 <option> 태그들을 묶어서 더욱 체계적인 옵션 목록을 구성할 수 있도록 합니다. 예를 들어, 국가 목록에서 대륙별로 옵션을 그룹화하는 경우에 유용합니다.

HTML 
<label for="country">국가 선택</label>
<select id="country">
    <optgroup label="아시아">
        <option value="korea">한국</option>
        <option value="japan">일본</option>
        <option value="china">중국</option>
    </optgroup>
    <optgroup label="유럽">
        <option value="uk">영국</option>
        <option value="germany">독일</option>
        <option value="france">프랑스</option>
    </optgroup>
</select>
실제 적용된 모습

<datalist> 태그와의 관계

<datalist> 태그 내에서 <option> 태그들은 다른 컨트롤에서 사용자가 선택할 수 있는 다양한 선택지를 제공하는 옵션으로 사용됩니다.

HTML 
<label for="volume">볼륨</label>

<!-- list 속성으로 datalist 태그 연결 -->
<input type="range"
    id="volume"
    min="0"
    max="100"
    step="25"
    value="50"
    list="markers">

<!-- 눈금 표시:
     <option> 태그를 사용해 각 눈금의 값을 정의 -->
<datalist id="markers">
    <option value="0"></option>
    <option value="25"></option>
    <option value="50"></option>
    <option value="75"></option>
    <option value="100"></option>
</datalist>

코드 부연설명
<input> 태그의 type="range"는 사용자가 설정된 숫자 범위 내에서 값을 선택할 수 있도록 일반적으로 슬라이더 형태의 컨트롤로 제공되는 입력 필드를 나타냅니다.

실제 적용된 모습

위 예제에서 <datalist> 태그는 눈금 표시를 위한 <option> 태그들을 포함하고, 각 눈금에 대해 사용자가 선택할 수 있는 값을 제공합니다.

기술적인 문법 요약

option 태그의 구문 형식
허용되는 부모 요소 <select>, <optgroup>, <datalist>
허용되는 콘텐츠 텍스트나 이스케이프 문자(HTML 특수 문자를 의미함)만 유효합니다. 만약, HTML 태그가 포함된다면(예를 들어 <a>, <span> 등) 브라우저는 해당 태그가 가지는 고유한 기능과 스타일을 무시하고 태그 내의 텍스트나 이스케이프 문자을 유효한 콘텐츠로 사용합니다.
암시적인 role 속성 값 option
허용된 role 속성 값 없음

관련 속성 사용하기

<option> 태그는 모든 글로벌 속성을 사용할 수 있습니다.
그리고, <option>에서 사용되는 관련 속성이 있습니다. 다음의 속성을 추가로 지원합니다.

option 태그의 관련 속성
속성설명
value 옵션 항목의 값을 설정합니다. 이 값은 사용자가 해당 항목을 선택했을 때 <form>을 제출할 때 전송되는 값이 됩니다. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.
selected 페이지가 처음 로드될 때 기본적으로 선택된 상태로 만듭니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.
disabled 해당 옵션을 비활성화하여 사용자가 선택할 수 없게 만듭니다.
label 옵션의 뜻을 나타내는 레이블(이름)을 텍스트로 지정합니다. 지정하지 않으면 텍스트 콘텐츠를 대신 사용합니다.

value 속성

옵션 항목의 값을 설정합니다. 이 값은 사용자가 해당 항목을 선택했을 때 <form>을 제출할 때 전송되는 값이 됩니다. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.

HTML 
<form>
    <label for="user-color">색상 선택</label>
    <select id="user-color">
        <option value="red">빨강</option>
        <option value="blue">파랑</option>
        <option value="yellow">노랑</option>
        <option value="green">초록</option>
    </select>
</form>

selected 속성

페이지가 처음 로드될 때 기본적으로 선택된 상태로 만듭니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<label for="user-color">색상 선택</label>
<select id="user-color">
    <option value="red">빨강</option>
    <option value="blue">파랑</option>
    <option value="yellow" selected>노랑</option>
    <option value="green">초록</option>
</select>
실제 적용된 모습

disabled 속성

disabled 속성은 컨트롤 비활성 속성이라고도 부르며, 포커스도 가능하지 않으며, 양식 제출 시 해당 값은 제출되지 않습니다. <select>가 활성화 되어 컨트롤에 드롭다운 목록이 표시되는 경우 대부분의 브라우저는 이 속성을 포함한 옵션을 회색처리합니다. 그리고, 사용자도 이 옵션을 선택할 수 없습니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<label for="user-color">색상 선택</label>
<select id="user-color">
    <option value="red">빨강</option>
    <option value="blue" disabled>파랑</option> <!-- 해당 옵션은 비활성화(회색처리 포함) 됨 -->
    <option value="yellow">노랑</option>
    <option value="green">초록</option>
</select>
브라우저에서 실제 표시된 모습

<datalist> 태그의 눈금 표시로 사용되는 <option>태그에 지정하면 해당 옵션의 눈금은 표시되지 않습니다.

HTML 
<label for="volume">볼륨</label>
<input type="range"
    id="volume"
    min="0"
    max="100"
    step="25"
    value="50"
    list="markers">
<datalist id="markers">
    <option value="0" disabled></option> <!--  해당 옵션의 눈금은 표시되지 않음 -->
    <option value="25"></option>
    <option value="50"></option>
    <option value="75"></option>
    <option value="100"></option>
</datalist>
브라우저에서 실제 표시된 모습

label 속성

옵션의 뜻을 나타내는 레이블(이름)을 텍스트로 지정합니다.

HTML 
<label for="user-color">색상 선택</label>
<select id="user-color">
    <option value="red" label="빨강"></option>
    <option value="blue" label="파랑"></option>
    <option value="yellow" label="노랑"></option>
    <option value="green" label="초록"></option>
</select>
브라우저에서 실제 표시된 모습

지정하지 않으면 텍스트 콘텐츠를 대신 사용합니다.

HTML label 속성을지정하지 않았습니다. 
<form>
    <label for="user-color">색상 선택</label>
    <select id="user-color">
        <option value="red">빨강</option>
        <option value="blue">파랑</option>
        <option value="yellow">노랑</option>
        <option value="green">초록</option>
    </select>
</form>
브라우저에서 실제 표시된 모습

브라우저 호환성

option 태그와 관련 속성의 브라우저 호환성
태그와 관련 속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<option> 1 12 1 4
value 1 12 1 4
selected 1 12 1 4
disabled 1 12 1 4
label 1 12 1 4

명세서

option 태그의 명세서 사양
명세서 사양
<option> HTML Standard
#the-option-element

참고문헌

같이 보기