HTML <option> 태그 사용법, 드롭다운 목록에 옵션 추가하기

HTML <option> 태그 사용법: 드롭다운 목록에 옵션 추가하기

HTML에서 <select> 태그는 드롭다운 목록을 생성하는 데 사용되며, 그 안에 선택 가능한 각 항목을 정의하는 것이 <option> 태그입니다. <option> 태그를 통해 사용자는 미리 정의된 여러 값 중 하나를 선택할 수 있습니다. 이 가이드에서는 <option> 태그의 사용법과 속성, 그리고 이를 활용한 실용적인 예제를 소개합니다.

 

 

목차

1. <option> 태그란?
2. <option> 태그 기본 사용법
3. <option> 태그의 주요 속성
4. 기본 선택값 지정하기
5. <optgroup>과 <option>의 활용
6. 예제 코드
7. 추가 팁: <option> 태그와 접근성

 

<option> 태그란?

<option> 태그는 <select> 태그 안에 위치하며, 드롭다운 메뉴에서 선택 가능한 개별 항목을 정의합니다. 사용자가 이 항목 중 하나를 선택하면, 선택된 <option>의 값이 폼 데이터로 전송됩니다. 이 태그는 단순하지만 폼 입력에 중요한 역할을 하며, 다양한 속성을 통해 사용성을 높일 수 있습니다.

 

 

<option> 태그 기본 사용법

<select> 태그 내부에 <option> 태그를 여러 개 포함하여 선택 가능한 옵션을 추가합니다. 예를 들어, 아래 코드는 사용자가 선택할 수 있는 과일 목록을 생성합니다.

<select name="fruits">
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option value="cherry">체리</option>
</select>
    

위 예제에서 드롭다운 목록에는 '사과', '바나나', '체리'가 표시되며, 사용자가 선택한 항목의 값(value)이 전송됩니다.

 

 

<option> 태그의 주요 속성

<option> 태그에는 여러 유용한 속성이 있습니다. 각 속성은 옵션의 동작을 세밀하게 조정하는 데 도움을 줍니다.

• value: 사용자가 해당 옵션을 선택했을 때 전송되는 값입니다. 만약 value 속성을 지정하지 않으면, <option> 태그의 내용이 전송됩니다.
• disabled: 이 속성을 사용하면 해당 옵션이 선택 불가능하도록 만듭니다.
• selected: 이 속성은 드롭다운이 로드될 때 기본적으로 선택된 옵션을 지정합니다.
• label: 시각적으로는 보이지 않지만, <option> 태그에 설명을 추가하여 접근성이나 화면 판독기를 돕는 데 사용됩니다.

 

 

기본 선택값 지정하기

selected 속성을 사용하면 페이지가 로드될 때 기본으로 선택된 항목을 지정할 수 있습니다. 예를 들어, 아래 코드는 '바나나'가 기본 선택값으로 설정된 드롭다운 메뉴를 보여줍니다.

<select name="fruits">
  <option value="apple">사과</option>
  <option value="banana" selected>바나나</option>
  <option value="cherry">체리</option>
</select>
    

사용자는 '바나나'가 미리 선택된 상태에서 드롭다운 메뉴를 확인할 수 있습니다.

 

 

<optgroup>과 <option>의 활용

<optgroup> 태그는 여러 <option> 태그를 그룹화하여 더 구조적인 드롭다운 목록을 만들 때 사용됩니다. 예를 들어, 과일과 채소를 구분한 목록을 만들 수 있습니다.

<select name="items">
  <optgroup label="과일">
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
  </optgroup>
  <optgroup label="채소">
    <option value="carrot">당근</option>
    <option value="spinach">시금치</option>
  </optgroup>
</select>
    

위 코드에서 '과일'과 '채소'라는 두 그룹이 나뉘어 표시됩니다. 이 구조는 사용자가 다양한 선택 항목을 더 쉽게 탐색할 수 있도록 도와줍니다.

 

 

 

 

예제 코드

다양한 속성을 적용한 <option> 태그의 예제를 살펴보겠습니다.

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="bmw" disabled>BMW (선택 불가)</option>
  <option value="audi" selected>Audi</option>
  <option value="mercedes">Mercedes</option>
</select>
    

이 예제에서 'BMW'는 선택 불가 상태로 비활성화되어 있으며, 'Audi'는 기본으로 선택된 상태로 표시됩니다.

 

 

추가 팁: <option> 태그와 접근성

접근성을 고려할 때, <label> 태그와 <option>을 함께 사용하는 것이 중요합니다. 시각 장애인이나 화면 판독기를 사용하는 사용자가 드롭다운 메뉴를 쉽게 탐색할 수 있도록 도와줍니다. label 속성은 시각적으로는 표시되지 않지만, 보조 기기가 메뉴 항목을 읽는 데 도움을 줍니다.

예를 들어:

<select name="countries">
  <option value="kr" label="대한민국">Korea</option>
  <option value="us" label="미국">USA</option>
  <option value="jp" label="일본">Japan</option>
</select>
    

위 예시에서는 label 속성을 사용하여 화면 판독기가 각 나라를 한국어로 읽을 수 있도록 했습니다.

 

 

결론

<option> 태그는 드롭다운 메뉴에서 중요한 역할을 하며, 다양한 속성을 통해 사용성을 높일 수 있습니다. 기본적인 사용법부터 고급 기능까지 익힌다면 더욱 효율적이고 사용자 친화적인 폼을 만들 수 있습니다. 이 가이드를 통해 <option> 태그를 자유롭게 활용해 보세요.