HTML select 태그 완벽 가이드: 드롭다운 목록 만드는 방법

HTML <select> 태그는 사용자가 하나 또는 여러 개의 옵션을 선택할 수 있는 목록을 생성하는 요소입니다. <select> 태그 안에는 사용자가 선택할 수 있는 항목을 나타내는 <option> 태그가 하나 이상 포함되어야 합니다.

선택 목록(셀렉트 박스)은 많은 웹 폼에서 필수적인 요소입니다. 선택 목록을 활용하면 사용자 입력을 받으면서도, 사용자가 선택할 수 있는 옵션을 개발자가 지정한 값으로 제한할 수 있다는 장점이 있습니다.

이 글에서는 HTML <select> 태그의 사용법을 예제와 함께 자세히 살펴보겠습니다.

HTML 폼(Form) 기본 개념

폼은 수많은 웹사이트에서 핵심적인 역할을 하며, 사용자로부터 데이터를 받아 웹사이트에서 처리할 수 있도록 해줍니다. 예를 들어 커피숍 웹사이트를 디자인한다면, 고객 피드백을 받는 폼을 만들고 싶을 것입니다.

HTML에서는 <form> 태그로 폼을 선언하고, 그 안에 <input>이나 <select> 같은 요소를 배치해 폼이 수집할 데이터를 정의합니다. 이 글에서는 특히 <select> 태그를 중심으로, 폼에서 데이터를 수집하는 방법을 다룹니다.

HTML <select> 태그란?

HTML <select> 태그는 사용자가 하나 또는 여러 개의 옵션을 선택할 수 있는 목록을 만듭니다. <option> 요소는 <select> 태그 안에 표시되는 개별 선택 항목을 정의합니다.

<select> 태그는 클릭하면 옵션들이 펼쳐지는 드롭다운 목록 형태의 폼 필드를 생성합니다.

<select> 태그의 기본 문법은 다음과 같습니다:

<select></select>

<select> 태그만으로는 아무런 옵션도 표시되지 않습니다. 목록에 나타날 항목을 정의하려면 반드시 <option> 태그를 함께 사용해야 합니다.

<option> 태그의 문법은 다음과 같습니다:

<select>
	<option value="optionOne">Option One</option>
</select>

위 예제처럼 <option> 태그는 <select> 태그 내부에 작성됩니다. 또한 value 속성을 함께 지정했습니다.

value 속성은 사용자가 해당 옵션을 선택했을 때 서버로 전송될 데이터 값을 저장합니다. 즉, 사용자가 목록에서 'Option One'을 선택하면 서버에는 optionOne이라는 값이 전달됩니다.

각 <option> 태그에는 value 속성을 지정하는 것이 좋습니다.

참고로 HTML <select> 태그는 모든 주요 최신 브라우저에서 지원됩니다.

<select> 태그를 사용해야 하는 이유

<select> 태그는 사용자가 폼 필드에 입력할 수 있는 값을 제한하고 싶을 때 유용합니다. 대표적인 활용 사례는 다음과 같습니다:

• 사용자가 국가를 선택할 수 있는 목록 제공
• 제품에 사용 가능한 색상 목록 제공
• 구매 수량 선택 허용 (예: 1~10개)

이처럼 선택 가능한 값이 정해져 있는 경우에 드롭다운 메뉴를 사용하면, 코드가 예상하는 유효한 응답만 받을 수 있습니다. 일반 텍스트 입력 필드와 달리 사용자가 임의의 값을 입력할 수 없기 때문입니다.

HTML <select> 실전 예제

동네 빵집을 위한 웹 폼을 만든다고 가정해 보겠습니다. 고객이 빵을 주문할 수 있는 폼을 요청받았고, 이 폼에는 빵 종류를 고를 수 있는 드롭다운 목록이 포함되어야 합니다. 표시할 옵션은 다음과 같습니다:

• 플레인 화이트 (Plain White)
• 플레인 브라운 (Plain Brown)
• 통곡물 (Whole Grain)
• 사워도우 (Sourdough)

기본값으로는 'Plain White'가 선택되어 있어야 합니다.

이 드롭다운 메뉴는 다음 코드로 구현할 수 있습니다:

<select name="breadType">
	<option value="plainWhite" selected>Plain White</option>
	<option value="plainBrown">Plain Brown</option>
	<option value="wholeGrain">Whole Grain</option>
	<option value="sourdough">Sourdough</option>
</select>

먼저 <select> 태그로 선택 목록을 정의하고, name 속성을 지정해 이 폼 컨트롤의 이름을 breadType으로 설정했습니다.

다음으로 네 개의 <option> 태그를 사용해 사용자에게 보여줄 옵션 목록을 만들었습니다. 각 <option> 태그에는 value 속성이 지정되어 있으며, 이 값은 사용자가 폼을 제출할 때 서버로 전송됩니다.

첫 번째 <option> 태그에는 selected 속성이 추가로 지정되어 있습니다. 덕분에 'Plain White'가 기본 선택 옵션으로 표시됩니다.

여러 개 선택 허용하기: multiple 속성

multiple 속성을 사용하면 사용자가 목록에서 여러 옵션을 동시에 선택할 수 있습니다:

<select name="breadType" multiple>
  	<option value="plainWhite" selected>Plain White</option>
	<option value="plainBrown">Plain Brown</option>
	<option value="wholeGrain">Whole Grain</option>
	<option value="sourdough">Sourdough</option>
</select>

multiple 속성은 불리언(boolean) 속성이므로 등호(=)로 값을 할당할 필요 없이 키워드만 작성하면 됩니다.

여러 값을 선택하려면 Windows에서는 Ctrl 키를, Mac에서는 Cmd 키를 누른 상태로 항목을 클릭하면 됩니다.

HTML <select> 태그의 주요 속성

<select> 태그에 적용할 수 있는 주요 HTML 속성은 다음과 같습니다:

마무리

HTML <select> 요소는 미리 정의된 값 목록을 표시하는 폼 필드를 생성하며, 사용자는 목록에서 하나 또는 여러 개의 값을 선택할 수 있습니다. 사용자가 정해진 값 중에서 선택하도록 하고 싶을 때 <select> 필드가 매우 유용합니다.

이 글에서는 예제를 통해 <select> 태그로 HTML 드롭다운 목록 폼 필드를 만드는 방법을 알아보았습니다. 기본 사용법과 multiple, selected 같은 속성을 익혀두면 다양한 웹 폼을 손쉽게 구현할 수 있습니다.