HTML에서 선택 가능한 목록(드롭다운 리스트)을 만들려면 <select> 태그를 사용합니다. 이 태그는 주로 폼(form) 내부에서 사용자가 여러 옵션 중 하나를 선택할 수 있도록 하는 선택 목록을 정의하는 데 활용됩니다.
select 태그의 주요 속성
HTML <select> 태그는 아래와 같은 다양한 속성을 추가로 지원합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| autofocus | autofocus | 페이지가 로드될 때 드롭다운 목록에 자동으로 포커스가 지정되도록 합니다. |
| disabled | disabled | 입력 컨트롤을 비활성화합니다. 비활성화된 목록은 사용자의 변경 입력을 받지 않으며, 포커스도 받을 수 없고 Tab 키 이동 시에도 건너뛰어집니다. |
| form | form_id | 해당 select 요소가 속한 하나 이상의 폼을 지정합니다. |
| multiple | multiple | 이 속성이 설정되면 사용자가 한 번에 여러 항목을 선택할 수 있습니다. |
| name | name | 입력 컨트롤에 이름을 부여합니다. 폼 제출 시 서버로 전달되는 데이터의 키(key)로 사용됩니다. |
| required | required | 폼을 제출하기 전에 반드시 값을 선택하도록 강제합니다. 값을 선택하지 않으면 폼이 제출되지 않습니다. |
| size | 숫자 | 드롭다운 목록에서 화면에 표시되는 항목의 개수를 정의합니다. |
예제 코드
아래 코드를 실행하면 HTML에서 선택 가능한 목록을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML select Tag</title> </head> <body> <form action = "/cgi-bin/dropdown.cgi" method = "post"> <select name = "dropdown"> <option value = "Data Structures" selected>Data Structures</option> <option value = "Data Mining">Data Mining</option> </select> <input type = "submit" value = "Submit" /> </form> </body> </html>
코드 설명
위 예제에서는 <form> 태그 안에 <select> 태그를 배치하여 드롭다운 목록을 구성했습니다. 각 선택 항목은 <option> 태그로 정의되며, selected 속성이 적용된 "Data Structures" 항목이 기본값으로 미리 선택된 상태로 표시됩니다. 사용자가 항목을 선택하고 Submit 버튼을 누르면, name 속성에 지정된 "dropdown"이라는 이름과 함께 선택된 값이 서버로 전송됩니다.
이처럼 <select> 태그와 <option> 태그를 조합하면 간단하게 드롭다운 메뉴를 구현할 수 있으며, 필요에 따라 multiple, required, size 등의 속성을 추가해 더욱 유연한 선택 목록을 만들 수 있습니다.