As we expand our knowledge of HTML, one of the many things we need to start to consider is how what we create will affect the experience for people who use our page. One of the things we need to look at is how the organization of a web page will alter the experience. A page that is too cluttered will definitely affect whether or not clients decide to stay on the page and complete what they intended to do while on the site.
One of the ways we can organize forms on our site is by nesting what would have been radio buttons inputs or checkboxes into its own dropdown so a user could scroll through a list to find one option.
In this article, we will learn how to leverage HTML so that we can create a <select> dropdown that would be used as a form element. If you would like to see how a navbar dropdown menu might be created, please checkout CSS Dropdowns.
Basic Structure
The basic structure of an HTML dropdown menu is a <select> element that names and identifies the grouping, and the multiple <option> tags that make up the content of your dropdown.
To start, let’s create the skeleton of that dropdown. Write out a <select> element with id and name of “baseball-teams”. The id is going to help us if we want to adjust the styling. The name attribute helps us when we want to use the form data after a team is selected and we want to submit the information to a server.
<!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>Running your code at this point, you will see a very basic dropdown. The first option tells what the value of the dropdown options is. In this case, they want us to choose a baseball team. Click on the dropdown and you will see values for all of the teams in the major league.
When you pick a value, it assigns it to the selected index of the <select>. This is what will help any sort of logic you have when you decide what to do with the data. Knowing the name and value of the selected index is super important if you want to do anything with that data.
You’ll study more about what to do with form data when you study the backend – don’t worry about what’s going on with the JavaScript at the bottom of the document. Only worry about what to do to get the dropdown on the page – the <select> and the <option> elements.
Conclusion
In this article we learned about how to create a dropdown menu for forms. Use the <select> and <option> elements to give your users a way to make a selection from multiple options. Once you get the hang of the basics here, look into what <optgroup> does!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
