Everything about Dropdown List in HTML with Video Examples

Hello friend! Today we learn together everything about Dropdown List in HTML with example demo and code along with video tutorials in Khmer. Now let get started!

1. Simple Dropdown List in HTML

Watch video first for learn how to create simple dropdown options:

When you want make dropdown box for user select one item, you use <select> tag to wrap outside and <option> tag for list each item inside. Read the official MDN Select Element Documentation. If you need search/autocomplete options, check out How to Create Dropdown List with Autocomplete Options!

Simple Code Example

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Rendered Output Preview:

2. Dropdown List with Group Option in HTML

Watch video first for learn how to group options together and make multiple selection:

If you have many items, you can use <optgroup> tag with label attribute for divide items into categories like Swedish Cars or German Cars.

Code Example with Optgroup & Multiple Select

<select multiple size="4">
  <option value="">-- Select a car --</option>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Pro Tip: When you use multiple attribute, user can press Ctrl + Click (or Cmd + Click on Mac) to select many items at same time!

Rendered Output Preview:

3. Select Properties and Attributes in HTML

We can put many properties on <select> tag and <option> tag to make dropdown list more useful for user:

• name : Name of dropdown box when send data to server.
• id : Unique ID for target with CSS or JavaScript.
• multiple : Allow user for select more than one item.
• size : Show number of visible items box without click dropdown.
• disabled : Lock dropdown box so user cannot click or change.
• autofocus : Auto focus on dropdown box when web page load finish.
• required : User must select one option before submit form.
• selected : Put on <option> tag for make default selected item.

Example with Attributes

<select name="car_brand" id="cars" required autofocus>
  <option value="" disabled selected>-- Choose car --</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

Rendered Output Preview:

Bonus: Searchable Dropdown List with <datalist> Tag

If you want user can type text to search options inside dropdown box, standard <select> tag cannot do that. But HTML has special <datalist> tag built-in!

You connect <input list="id"> to <datalist id="id"> like this:

Code Example with <datalist>

<!-- Input box with list attribute -->
<label for="browser">Choose your browser:</label>
<input list="browsers" name="browser" id="browser" placeholder="Type to search..." />

<!-- Datalist box with options -->
<datalist id="browsers">
  <option value="Google Chrome">
  <option value="Mozilla Firefox">
  <option value="Microsoft Edge">
  <option value="Apple Safari">
  <option value="Brave Browser">
</datalist>

Rendered Output Preview (Try typing inside box!):

• Why <datalist> is cool: User can type any custom text OR click down arrow to select from dropdown list! Perfect for search filters.

💡 Next Lesson: Master form grouping with How to use Fieldsets with Radios and Checkbox in HTML Form!