option element - by. UXKM

요약 설명

<option> 요소는 <select> 또는 <datalist> 요소 내에서 사용자가 선택할 수 있는 개별 항목을 정의하는 시맨틱 태그입니다.

<select> 요소에서 사용할 때는 <option> 요소로 드롭다운 목록을 구성하고, 기본 첫 번째 <option>이 선택된 상태로 화면에 표시되지만, selected 속성을 사용하면 초기 선택값을 직접 설정할 수 있습니다.
또한 disabled 속성을 통해 선택할 수 없는 비활성 항목을 만들 수도 있어, 사용자 선택 흐름을 보다 정교하게 제어할 수 있습니다.
사용자가 선택한 <option>의 value 값이 데이터로 전송됩니다.

<datalist> 요소에서 사용할 때는 자동완성 목록에서 하나의 선택지로 표시되며, 사용자가 키보드 입력 시 <option>의 value 값과 같은 내용을 입력하면 자동으로 해당 값이 완성됩니다.

주요 역할 및 특징

  1. 드롭다운 목록(<select>)에서 선택 가능한 항목 제공

    <option> 요소를 사용하여 사용자가 선택할 수 있는 목록을 구성합니다.

  2. 자동완성 기능을 지원하는 <datalist>에서 사용 가능

    <datalist> 내에서 자동완성 옵션을 제공할 수 있습니다.

  3. 값(value) 지정 가능
    • <option> 요소는 value 속성을 사용하여 선택되었을 때 전송될 값을 지정할 수 있습니다.
    • value 속성이 없는 경우, <option> 내부의 텍스트 값이 자동으로 사용됩니다.
  4. 기본 선택값 설정 가능 (selected 속성 사용)

    selected 속성을 사용하여 특정 옵션을 기본 선택된 상태로 표시할 수 있습니다.

  5. 비활성화 가능(disabled 속성 사용)

    disabled 속성을 사용하여 특정 옵션을 비활성화하여 선택할 수 없도록 설정할 수 있습니다.

CSS 기본 값

<option> 요소는 기본적으로 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

요약 설명

<option> 요소는 <select>와 <datalist>에서 사용할 수 있으며, 각 요소에서 속성의 동작 방식이 다릅니다.
다음은 value, selected, disabled, label 속성이 <select>와 <datalist>에서 어떻게 다르게 동작하는지 정리한 설명입니다.

<option> 속성 요약

  • 속성명
  • 설명

  • value

    선택 시 서버로 전송할 값 지정 (<select>, <datalist>에서 사용)

  • selected

    기본적으로 선택된 상태로 설정 (<select>만 적용 가능)

  • disabled

    선택할 수 없도록 비활성화 (<select>만 적용 가능)

  • label

    옵션에 대한 사용자 친화적인 라벨 제공 (<select>만 적용 가능)

[value] 선택 사항 <option value="값">

  • <select>

    사용자가 특정 옵션을 선택하면 해당 옵션의 value 속성에 지정된 값이 서버로 전송됩니다.
    만약 value 속성을 지정하지 않으면, 옵션의 텍스트 내용이 서버로 전송됩니다.

  • <datalist>

    해당 옵션의 value 값이 사용자가 직접 입력할 수 있는 추천값으로 사용됩니다.

[selected] Boolean - 선택 사항 <option selected>

  • <select>

    기본적으로 선택될 <option>을 지정합니다.
    이 속성이 설정된 <option>은 페이지 로드 시 자동으로 선택되며, 단일 선택 및 다중 선택(multiple) 드롭다운 모두에서 사용할 수 있습니다.
    만약 selected 속성이 지정되지 않으면, 기본적으로 첫 번째 <option>이 선택됩니다.

  • <datalist>

    <datalist> 내에서 사용되는 <option> 요소는 자동 완성 목록을 제공하는 용도로만 사용되므로, selected 속성을 지원하지 않습니다.

[disabled] Boolean - 선택 사항 <option disabled>

  • <select>

    <option> 요소를 비활성화하여 사용자가 선택할 수 없도록 설정하는 속성으로, disabled 속성이 적용되면 스타일도 비활성화된 상태로 변경됩니다.

  • <datalist>

    <datalist> 내에서 사용되는 <option> 요소는 자동 완성 목록을 제공하는 용도로만 사용되므로, disabled 속성을 지원하지 않습니다.

[label] 선택 사항 <option label="값">

  • <select>

    label 속성은 <option> 요소에 추가적인 설명을 제공하는 역할을 하며, 브라우저가 해당 옵션을 표시할 때 label 값을 대신 사용할 수도 있습니다.
    하지만 대부분의 경우 label 속성이 있어도 <option> 요소의 텍스트 콘텐츠가 우선적으로 표시됩니다.

  • <datalist>

    <datalist> 내에서 사용되는 <option> 요소는 자동 완성 목록을 제공하는 용도로만 사용되므로, label 속성을 지원하지 않습니다.

예제

<option> 요소는 단독으로 사용하면 의미가 없습니다. <option> 요소는 <select> 또는 <datalist> 요소 내에 사용되어, 사용자가 선택할 수 있는 항목을 정의하거나 자동완성 목록을 제공하는 역할을 합니다.
<option> 요소를 사용하는 예제는 select element와 datalist element에서 확인할 수 있습니다.

select element 예제 비로가기 datalist element 예제 비로가기

주의사항

  • <select> 요소에 multiple 속성이 없을 경우, 여러 개의 <option> 요소에 selected 속성을 지정해도 첫 번째 selected 속성이 있는 옵션만 선택됩니다.
  • <option> 요소는 CSS 스타일링이 제한적입니다. 일부 브라우저에서 <option> 요소의 스타일을 제한적으로 지원하므로, 완전한 디자인 변경이 어려울 수 있습니다.
  • disabled 옵션은 선택 불가능하지만 여전히 비활성 상태로 화면에 표시됩니다.
    옵션을 완전히 숨기려면 CSS display: none;을 적용해야 합니다.