HTML에 대한 지식을 확장하면서 고려해야 할 많은 사항 중 하나는 우리가 만드는 것이 페이지를 사용하는 사람들의 경험에 어떤 영향을 미칠 것인지입니다. 우리가 살펴봐야 할 것 중 하나는 웹 페이지의 구성이 경험을 어떻게 변화시킬 것인지입니다. 너무 어수선한 페이지는 클라이언트가 페이지에 머물고 사이트에 있는 동안 의도한 작업을 완료할지 여부에 확실히 영향을 미칩니다.
사이트에서 양식을 구성할 수 있는 방법 중 하나는 라디오 버튼 입력 또는 확인란을 자체 드롭다운에 중첩하여 사용자가 목록을 스크롤하여 하나의 옵션을 찾을 수 있도록 하는 것입니다.
이 기사에서는 HTML을 활용하여 <select>를 생성하는 방법을 배웁니다. 양식 요소로 사용되는 드롭다운입니다. 탐색 모음 드롭다운 메뉴가 어떻게 생성되는지 확인하려면 CSS 드롭다운을 확인하세요.
기본 구조
HTML 드롭다운 메뉴의 기본 구조는 <select> 그룹의 이름을 지정하고 식별하는 요소와 여러 <option> 드롭다운의 콘텐츠를 구성하는 태그입니다.
시작하려면 해당 드롭다운의 골격을 만들어 보겠습니다. <select> 작성 id와 이름이 "baseball-teams"인 요소입니다. 스타일을 조정하려는 경우 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" value="LA Angels">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>의 선택된 인덱스에 값이 할당됩니다. . 이것은 데이터로 무엇을 할 것인지 결정할 때 가지고 있는 모든 종류의 논리에 도움이 됩니다. 선택한 인덱스의 이름과 값을 아는 것은 해당 데이터로 무엇이든 하려는 경우 매우 중요합니다.
백엔드를 공부할 때 양식 데이터로 무엇을 해야 하는지에 대해 더 많이 공부할 것입니다. 문서 맨 아래에 있는 JavaScript에서 무슨 일이 일어나고 있는지 걱정하지 마십시오. <select> 페이지에 드롭다운을 표시하기 위해 무엇을 해야 하는지에 대해서만 걱정하십시오. 및 <option> 집단.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
결론
이 기사에서는 양식에 대한 드롭다운 메뉴를 만드는 방법에 대해 배웠습니다. <select> 사용 및 <option> 요소를 사용하여 사용자에게 여러 옵션 중에서 선택할 수 있는 방법을 제공합니다. 여기에서 기본 사항에 익숙해지면 <optgroup> 하다!