HTML에서는 폼(form)을 통해 사용자 입력을 받을 때 간단한 드롭다운 목록을 손쉽게 만들 수 있습니다. 이때 사용하는 것이 바로 <select> 요소로, 흔히 셀렉트 박스(select box) 또는 드롭다운 박스(drop-down box)라고 부르며, 목록 형태로 여러 항목을 표시할 수 있습니다.
기본값(디폴트 값) 설정하기
드롭다운 목록에서 특정 항목을 미리 선택된 상태로 표시하고 싶다면, 해당 항목의 <option> 태그에 selected 속성을 추가하면 됩니다. 이렇게 하면 페이지가 로드될 때 지정한 옵션이 자동으로 선택되어 나타납니다.
예를 들어, 여러 과목 중 'Discrete Mathematics'를 기본값으로 설정하려면 다음과 같이 작성합니다.
<select name = "dropdown"> <option value = "Java">Java</option> <option value = "Discrete Mathematics" selected>Discrete Mathematics</option> <option value = "Chemistry">Chemistry</option> </select>
전체 예제 코드
아래 전체 코드를 실행하면 HTML <select> 요소의 기본값이 어떻게 설정되는지 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Select Element</title>
</head>
<body>
<p> Select any one:</p>
<form>
<select name = "dropdown">
<option value = "Java">Java</option>
<option value = "Discrete Mathematics" selected>Discrete Mathematics</option>
<option value = "Chemistry">Chemistry</option>
</select>
</form>
</body>
</html>정리
<select>요소는 HTML 폼에서 드롭다운 목록을 만들 때 사용합니다.- 각 항목은
<option>태그로 정의하며,value속성으로 서버에 전송될 값을 지정합니다. - 특정 옵션을 미리 선택해 두려면 해당
<option>태그에 selected 속성만 추가하면 됩니다.
이처럼 selected 속성 하나만으로도 사용자에게 가장 많이 선택되는 항목이나 권장 값을 편리하게 미리 지정할 수 있어, 폼 사용성을 높이는 데 유용합니다.