Learning Objectives

After completing this tutorial, you will be able to:

• Understand the <select> element.
• Create dropdown menus.
• Add options using <option>.
• Connect a dropdown with a label.
• Set a default option.
• Use name, value, and required.
• Build practical dropdown fields.

Table of Contents

1. Introduction
2. What Is a Dropdown Menu?
3. The <select> Element
4. The <option> Element
5. Creating Your First Dropdown
6. Connecting a Label
7. Using the value Attribute
8. Creating a Default Option
9. Making a Dropdown Required
10. Disabling an Option
11. Creating a Course Selection
12. Real-World Registration Form
13. Best Practices
14. Common Beginner Mistakes
15. Practice Exercise
16. Assignment
17. Summary
18. Frequently Asked Questions
19. Next Tutorial

Introduction

In the previous tutorials, you learned how to collect different types of information using HTML forms.

You can now create:

Text fields
Email fields
Password fields
Number fields
Date fields
Checkboxes
Radio buttons
Textareas

But sometimes showing every possible choice at once is unnecessary.

For example, imagine a registration form asking:

Country:
[ Bangladesh ▼ ]

When the user clicks the field, they can choose from a list:

Bangladesh
India
Pakistan
Nepal
Sri Lanka

This is called a dropdown menu.

HTML provides the <select> and <option> elements for creating dropdowns.

What Is a Dropdown Menu?

A dropdown menu allows users to choose an option from a predefined list.

Common examples include:

• Country
• City
• Language
• Course
• Category
• Education level
• Account type
• Payment method

A simple dropdown looks like:

Country
[ Bangladesh ▼ ]

Instead of manually typing a value, the user selects one of the available options.

This helps keep submitted information consistent.

The <select> Element

The <select> element creates the dropdown control.

Basic structure:

<select>

</select>

However, a <select> normally contains one or more <option> elements.

Example:

<select>

    <option>Bangladesh</option>
    <option>India</option>
    <option>Nepal</option>

</select>

The <select> creates the dropdown.

The <option> elements create the choices.

Think of it like this:

<select>
    ↓
Dropdown

<option>
    ↓
Individual choice

The <option> Element

Each <option> represents one selectable item.

Example:

<option>Bangladesh</option>

Multiple options can be placed inside the same <select>.

<select>

    <option>Bangladesh</option>
    <option>India</option>
    <option>Pakistan</option>
    <option>Nepal</option>

</select>

The user can select one of these options.

Creating Your First Dropdown

Let's create a simple country dropdown.

<label for="country">Country</label>

<select id="country">

    <option>Bangladesh</option>
    <option>India</option>
    <option>Pakistan</option>
    <option>Nepal</option>

</select>

The structure is:

Country
[ Bangladesh ▼ ]

Clicking the dropdown displays the available choices.

Connecting a Label

Just like <input> and <textarea>, a <select> should have a label.

Example:

<label for="country">Country</label>

<select id="country">
    <option>Bangladesh</option>
    <option>India</option>
    <option>Nepal</option>
</select>

Notice:

for="country"
      ↓
id="country"

The values match.

This connects the label with the dropdown.

Using the value Attribute

When a form is submitted, the browser needs a value to send for the selected option.

That's where the value attribute becomes important.

Example:

<select id="country" name="country">

    <option value="bd">Bangladesh</option>
    <option value="in">India</option>
    <option value="pk">Pakistan</option>

</select>

The user sees:

Bangladesh
India
Pakistan

But the submitted values can be:

bd
in
pk

This is useful because the visible text and submitted value don't have to be identical.

For example:

<option value="web-design">Web Design</option>

The user sees:

Web Design

while the submitted value is:

web-design

Creating a Default Option

Often, you don't want the first real option to be automatically selected.

Instead, you can provide an instruction such as:

Select your country

Example:

<select id="country" name="country">

    <option value="">Select your country</option>

    <option value="bd">Bangladesh</option>
    <option value="in">India</option>
    <option value="np">Nepal</option>

</select>

The first option acts as a prompt.

Its value is empty:

value=""

This becomes especially useful when combined with required.

Making a Dropdown Required

You can use:

required

Example:

<label for="country">Country</label>

<select id="country" name="country" required>

    <option value="">Select your country</option>

    <option value="bd">Bangladesh</option>
    <option value="in">India</option>
    <option value="np">Nepal</option>

</select>

Now the user must select an actual country before the browser allows the form to submit.

This is better than making the first country automatically selected.

Disabling an Option

Sometimes you want to display an option but prevent users from selecting it.

Use:

disabled

Example:

<select>

    <option disabled>Select a course</option>

    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>

</select>

The disabled option can act as an instruction.

A better form example is:

<select id="course" name="course" required>

    <option value="" disabled selected>Select a course</option>

    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>

</select>

Here:

disabled → User cannot select the prompt
selected → Prompt appears initially
value=""  → No actual course has been selected

Creating a Course Selection

Imagine you're building a web design learning website.

You could create:

<label for="course">Choose a Course</label>

<select id="course" name="course" required>

    <option value="" disabled selected>
        Select a course
    </option>

    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
    <option value="responsive-design">
        Responsive Web Design
    </option>

</select>

This is a realistic example of a dropdown in a course registration system.

Real-World Registration Form

Let's combine what you've learned so far.

<h1>Course Registration</h1>

<form>

    <label for="name">Full Name</label>

    <input
        type="text"
        id="name"
        name="name"
        required>

    <br><br>

    <label for="email">Email Address</label>

    <input
        type="email"
        id="email"
        name="email"
        required>

    <br><br>

    <label for="course">Choose a Course</label>

    <select
        id="course"
        name="course"
        required>

        <option value="" disabled selected>
            Select a course
        </option>

        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>

    </select>

    <br><br>

    <input
        type="submit"
        value="Register">

</form>

You now have:

Full Name
Email
Course ▼
Register

This is the foundation of many real-world registration forms.

Best Practices

Use a Clear Label

Good:

<label for="course">Choose a Course</label>

The user immediately understands what the dropdown is for.

Use Meaningful Values

Instead of:

<option value="1">HTML</option>

you can use:

<option value="html">HTML</option>

Meaningful values make your HTML easier to understand and maintain.

Use name for Form Submission

Example:

<select
    id="course"
    name="course">

The name identifies the field when its value is submitted.

Use required When Necessary

If the user must choose an option:

<select required>

Use it.

Don't make optional fields required unnecessarily.

Common Beginner Mistakes

Mistake 1: Putting <option> outside <select>

Incorrect:

<option>HTML</option>

<select>
</select>

Correct:

<select>

    <option>HTML</option>
    <option>CSS</option>

</select>

<option> belongs inside <select>.

Mistake 2: Forgetting name

This:

<select id="course">

can work visually, but when you're submitting form data, you normally want:

<select id="course" name="course">

Mistake 3: Not providing a clear default

Instead of immediately selecting:

<option>Bangladesh</option>

you can use:

<option value="" disabled selected>
    Select your country
</option>

when a real selection is required.

Practice Exercise

Create a dropdown called Country.

Include:

• Bangladesh
• India
• Pakistan
• Nepal
• Sri Lanka

Requirements:

• Use <label>.
• Use <select>.
• Use <option>.
• Add id.
• Add name.
• Make it required.

Try writing it yourself before looking back at the examples.

Assignment

Create a Web Design Course Registration Form.

Include:

Personal Information

• Full Name
• Email

Course

Create a dropdown with:

• HTML
• CSS
• JavaScript
• Responsive Web Design

Experience

Create another dropdown with:

• Beginner
• Intermediate
• Advanced

Both dropdowns should have:

• Labels
• IDs
• Names
• Values
• A default prompt
• required

Build the complete form yourself.

Summary

In this tutorial, you learned how to create dropdown menus using:

<select>

and:

<option>

A basic dropdown looks like:

<select>

    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>

</select>

You also learned important attributes:

id
name
value
required
disabled
selected

These concepts will be used frequently when building professional forms.

Frequently Asked Questions

What is <select> used for?

It creates a dropdown menu containing selectable options.

What is <option> used for?

It defines an individual choice inside a <select>.

Can a dropdown be required?

Yes:

<select required>

Can the visible text and submitted value be different?

Yes.

<option value="web-design">Web Design</option>

The user sees Web Design, while the submitted value is web-design.

Can users select multiple options from a normal <select>?

By default, a normal <select> allows one option. Multiple selection requires the multiple attribute, which we'll cover later.