Select Dropdowns and Datalists
Learn how to create dropdown menus with <select>, organize options with <optgroup>, and build autocomplete fields with <datalist>.
The <select> dropdown — pick from a list
The <select> element creates a dropdown menu — a collapsed list that expands when the user clicks on it, revealing a set of predefined options. It's one of the most familiar form controls on the web.
A select dropdown is built from two elements working together:
<select>— the container that creates the dropdown<option>— each choice inside the dropdown
Each <option> has a value attribute (what gets sent to the server) and text content (what the user sees). These can be different:
<option value="us">United States</option>
The user sees "United States" but the server receives country=us.
If you omit the value attribute, the text content is used as the value instead.
Use <select> when you have a fixed list of 4-15 options. For fewer options, radio buttons are often better (all options visible at once). For very long lists (like all countries), a select still works but consider a searchable input.
Real-world example: On Amazon, the country/region selector during checkout is a <select> dropdown. Airline booking sites use selects for the number of passengers, class of service, and departure airports.
<select> dropdown like a vending machine. The machine shows you a list of options (A1: Chips, A2: Candy, B1: Soda, B2: Water). You press a button to make your choice, and the machine gives you that item. The code on the button (A1, B1) is like the value attribute — it's the identifier the machine uses internally. The label next to the button ("Chips", "Soda") is like the text content — it's what you, the user, read to make your decision.<option value="">Choose a country...</option>. Without it, the first real option is pre-selected and the user might submit the form without realizing they need to make an active choice. Adding disabled selected to this placeholder option prevents it from being re-selected after the user picks something else.