HTML에서는 드롭다운 목록(셀렉트 박스)을 활용해 HTML 폼에서 사용자 입력을 손쉽게 받을 수 있습니다. 셀렉트 박스라고도 불리는 드롭다운 박스는 다양한 옵션을 목록 형태로 정리하여 보여주기 때문에, 사용자가 원하는 항목을 간편하게 선택할 수 있다는 장점이 있습니다.
드롭다운 목록에서는 특정 값을 미리 선택된 상태로 표시할 수도 있습니다. 페이지가 로드될 때 가장 많이 선택되는 옵션이나 기본값을 보여주고 싶다면, 미리 선택하려는 값의 <option> 태그에 selected 속성을 추가하기만 하면 됩니다.
selected 속성의 동작 방식
selected 속성이 지정된 옵션은 페이지가 열리는 즉시 선택된 상태로 표시됩니다. 단일 선택 드롭다운에서는 하나의 옵션에만 selected 속성을 적용하는 것이 좋으며, 아무 옵션에도 selected를 지정하지 않으면 기본적으로 첫 번째 옵션이 선택되어 표시됩니다.
예제 코드
아래 예제를 실행하면 HTML 폼의 드롭다운 목록에서 값을 미리 선택하는 방법을 직접 확인할 수 있습니다. 이 예제에서는 'Java' 항목에 selected 속성을 추가하여 페이지 로드 시 자동으로 선택되도록 설정했습니다.
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<p> Select any one:</p>
<form>
<select name = "dropdown">
<option value = "Java" selected>Java</option>
<option value = "Discrete Mathematics">Discrete Mathematics</option>
</select>
</form>
</body>
</html>