HTML 지식을 넓혀가다 보면, 우리가 만든 결과물이 페이지를 사용하는 사람들에게 어떤 영향을 미치는지 고민하기 시작해야 합니다. 그중에서도 웹 페이지의 구성 방식이 사용자 경험에 어떤 변화를 주는지 살펴볼 필요가 있습니다. 페이지가 지나치게 복잡하고 어수선하면, 방문자가 사이트에 머물며 원래 하려던 작업을 끝까지 완료할지 여부에 분명히 부정적인 영향을 줄 수 있습니다.
사이트의 폼(form)을 깔끔하게 정리하는 방법 중 하나는, 라디오 버튼이나 체크박스로 나열했을 항목들을 하나의 드롭다운 안에 넣어 사용자가 목록을 스크롤하며 원하는 옵션을 찾도록 하는 것입니다.
이 글에서는 HTML을 활용해 폼 요소로 사용할 수 있는 <select> 드롭다운을 만드는 방법을 배워보겠습니다. 참고로 상단 내비게이션 바(navbar)용 드롭다운 메뉴를 만드는 방법이 궁금하다면 CSS 드롭다운 관련 자료를 확인해 보세요.
기본 구조
HTML 드롭다운 메뉴의 기본 구조는 크게 두 부분으로 이루어집니다. 첫 번째는 그룹 전체를 명명하고 식별해 주는 <select> 요소이고, 두 번째는 드롭다운의 실제 내용을 구성하는 여러 개의 <option> 태그입니다.
먼저 드롭다운의 뼈대를 만들어 보겠습니다. id와 name 속성이 모두 "baseball-teams"인 <select> 요소를 작성합니다. id는 나중에 스타일링을 조정할 때 유용하게 쓰이고, name 속성은 팀을 선택한 뒤 해당 데이터를 서버로 제출할 때 폼 데이터를 다루는 데 도움을 줍니다.
<!DOCTYPE html>
<html>
<body>
<h1>The select element</h1>
<p>The select element is used to create a drop-down list.</p>
<form onsubmit=handleSubmit(event)>
<label for="baseball-teams">Choose a baseball team:</label>
<select id="baseball-teams" name="baseball-teams">
<option selected value="">Select Team</option>
<option value="Arizona Diamondbacks">Arizona Diamondbacks</option>
<option value="Atlanta Braves">Atlanta Braves</option>
<option value="Baltimore Orioles">Baltimore Orioles</option>
<option value="Boston Red Sox">Boston Red Sox</option>
<option value="Chicago Cubs">Chicago Cubs</option>
<option value="Chicago White Sox">Chicago White Sox</option>
<option value="Cincinnati Reds">Cincinnati Reds</option>
<option value="Cleveland Indians">Cleveland Indians</option>
<option value="Colorado Rockies">Colorado Rockies</option>
<option value="Detroit Tigers">Detroit Tigers</option>
<option value="Houston Astros">Houston Astros</option>
<option value="Kansas City Royals">Kansas City Royals</option>
<option value="LA Angels">Los Angeles Angels of Anaheim</option>
<option value="LA Dodgers">Los Angeles Dodgers</option>
<option value="Miami Marlins">Miami Marlins</option>
<option value="Milwaukee Brewers">Milwaukee Brewers</option>
<option value="Minnesota Twins">Minnesota Twins</option>
<option value="NY Mets">New York Mets</option>
<option value="NY Yankees">New York Yankees</option>
<option value="Oakland Athletics">Oakland Athletics</option>
<option value="Philadelphia Phillies">Philadelphia Phillies</option>
<option value="Pittsburgh Pirates">Pittsburgh Pirates</option>
<option value="San Diego Padres">San Diego Padres</option>
<option value="San Francisco Giants">San Francisco Giants</option>
<option value="Seattle Mariners">Seattle Mariners</option>
<option value="STL">St. Louis Cardinals</option>
<option value="Tampa">Tampa Bay Rays</option>
<option value="TX">Texas Rangers</option>
<option value="Toronto">Toronto Blue Jays</option>
<option value="Washington">Washington Nationals</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form's data will be shown below.</p>
<h3></h3>
<script async defer>
const handleSubmit = (event) => {
event.preventDefault()
let select = document.getElementById('baseball-teams');
let option = select.options[select.selectedIndex];
let result = document.querySelector('h3');
result.textContent = option.text;
}
</script>
</body>
</html>
이 시점에서 코드를 실행하면 아주 기본적인 형태의 드롭다운이 화면에 나타납니다. 첫 번째 옵션은 드롭다운의 용도를 알려주는 안내 문구 역할을 합니다. 이 예제에서는 야구 팀을 선택하라는 안내입니다. 드롭다운을 클릭하면 메이저리그 소속 모든 팀의 목록이 펼쳐지는 것을 확인할 수 있습니다.
값을 하나 선택하면, 그 값이 <select> 요소의 selectedIndex(선택된 인덱스)에 할당됩니다. 선택한 데이터를 가지고 어떤 로직을 처리할지 결정할 때 이 정보가 바탕이 됩니다. 따라서 선택된 인덱스의 이름(name)과 값(value)을 정확히 아는 것은 해당 데이터를 활용하는 데 매우 중요합니다.
폼 데이터를 실제로 처리하는 방법은 백엔드를 공부할 때 더 자세히 다루게 되니 걱정하지 않아도 됩니다. 문서 하단의 JavaScript 코드 역시 지금 단계에서는 신경 쓰지 않아도 됩니다. 지금은 페이지에 드롭다운을 표시하는 방법, 즉 <select> 요소와 <option> 요소를 사용하는 것에만 집중하면 됩니다.
마무리
이번 글에서는 폼에 사용할 드롭다운 메뉴를 만드는 방법을 알아보았습니다. <select> 요소와 <option> 요소를 활용하면 사용자에게 여러 옵션 중 하나를 손쉽게 선택할 수 있는 인터페이스를 제공할 수 있습니다. 기본기를 익힌 후에는 <optgroup> 요소를 활용해 옵션들을 그룹별로 묶는 방법도 함께 살펴보세요!