HTML Select Fields: Creating Dropdown Lists

Master the <select> and <option> tags to build user-friendly dropdown menus for your web forms.

📝

Welcome! Let's learn how to build dropdown lists, a key part of any interactive form.

/* Let's begin building a form... */

The <select> Container

The <select> tag is the foundation of any dropdown menu. It acts as a container that holds all the individual choices. By itself, it doesn't do much, but it's the essential first step.

The <option> Choices

Inside the <select> container, each choice is defined with an <option> tag. The text between the opening and closing <option> tags is what the user sees in the list.

Purpose and Value

Dropdowns are crucial for user-friendly forms. They prevent typos and limit choices to a predefined set, ensuring the data you collect is clean and consistent. The value attribute of an option is what gets sent to the server.

Practice Zone

Time to apply what you've learned. These exercises will test your skills.

Interactive Test 1: Assemble the Dropdown

Assemble a complete dropdown menu by dragging the code snippets to their correct positions.

Arrastra en el orden correspondiente.


Arrastra las opciones:

select
Phone
option value="tablet"
select

Completa el código:

<______ name='device'>
<option value='phone'>______</option>
<______>Tablet</option>
</______>
Unlock with Premium

Interactive Test 2: Complete the Code

Complete the code for this dropdown menu by filling in the missing tag and attribute names.

Rellena los huecos en cada casilla.

< name="country">
  < ="US">United States</>
  <option value="CA">Canada</option>
</>
Unlock with Premium

Practice Example: Code Your Own

Create a dropdown list for choosing a programming language. Include options for JavaScript, Python, and Rust. Ensure each option has a corresponding `value` attribute.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<select name="language"> <option value="js">JavaScript</option> <option value="py">Python</option> <option value="rs">Rust</option> </select>
Unlock with Premium

Knowledge Check

Which attribute on the <option> tag specifies the data sent to the server?


Unlock with Premium

Advanced Dropdown Techniques

Once you've mastered the basics, you can enhance your dropdowns with option groups, multiple selections, and JavaScript interactivity.

1. Grouping Options with <optgroup>

For long lists, you can group related options under a non-selectable heading using the <optgroup> tag. This significantly improves usability.

<select>
  <optgroup label="Europe">
    <option>Germany</option>
    <option>France</option>
  </optgroup>
  <optgroup label="Asia">
    <option>Japan</option>
    <option>Korea</option>
  </optgroup>
</select>

2. Allowing Multiple Selections

By adding the boolean multiple attribute to the <select> tag, you can allow users to select more than one option (usually by holding Ctrl/Cmd and clicking).

<select name="toppings" multiple>
  <option>Lettuce</option>
  <option>Tomato</option>
  <option>Onions</option>
</select>
Practical Takeaway: Tags like <optgroup> and attributes like multiple provide powerful ways to enhance user experience without needing complex code.

Select & Option Glossary

<select>
The container element for a dropdown list.
<option>
Defines an individual item within a <select> list.
value
An attribute for <option>. Specifies the actual data to be sent to the server, which can differ from the displayed text.
selected
A boolean attribute for <option> that pre-selects an item when the page loads.
<optgroup>
A tag used to group related <option> elements together under a label.
multiple
A boolean attribute for <select> that allows the user to select multiple options from the list.