HTML에서는 <select> 태그를 사용해 폼(form) 안에 간단한 드롭다운 목록을 만들어 사용자 입력을 받을 수 있습니다. 셀렉트 박스(select box)라고도 불리는 드롭다운 목록은 여러 옵션을 목록 형태로 보여주고, 그중에서 사용자가 하나 또는 여러 개의 항목을 선택하도록 하는 요소입니다.
드롭다운 목록은 <select> 태그로 생성하며, 각각의 선택 항목은 <option> 태그로 정의합니다.
<select> 태그의 주요 속성
| 번호 | 속성 및 설명 |
| 1 | name 컨트롤에 이름을 부여하는 속성으로, 폼 전송 시 서버가 해당 값을 식별하는 데 사용됩니다. |
| 2 | size 스크롤이 가능한 목록 상자(list box) 형태로 표시하고 싶을 때 사용합니다. |
| 3 | multiple "multiple"로 설정하면 사용자가 목록에서 여러 개의 항목을 동시에 선택할 수 있습니다. |
<option> 태그의 주요 속성
| 번호 | 속성 및 설명 |
| 1 | value 해당 옵션이 선택되었을 때 서버로 전송되는 실제 값입니다. |
| 2 | selected 페이지가 로드될 때 이 옵션이 기본적으로 선택된 상태로 표시되도록 지정합니다. |
| 3 | label 옵션에 라벨을 붙이는 또 다른 방식으로, 화면에 표시되는 텍스트를 대체할 수 있습니다. |
예제 코드
아래 코드를 실행하면 HTML 폼에서 사용자 입력을 받기 위한 간단한 드롭다운 목록을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<p>아래 과목 목록 중 하나를 선택하세요:</p>
<form>
<select name = "dropdown">
<option value = "Computer Architecture" selected>컴퓨터 구조</option>
<option value = "Java">Java</option>
<option value = "Discrete Mathematics">이산수학</option>
</select>
</form>
</body>
</html>위 예제에서 첫 번째 옵션인 '컴퓨터 구조'에는 selected 속성이 적용되어 있으므로, 페이지가 열릴 때 기본값으로 자동 선택됩니다. 이처럼 <select>와 <option> 태그만 조합하면 별도의 스크립트 없이도 손쉽게 드롭다운 입력 필드를 구현할 수 있습니다.