Select dropdown in HTML - Mini Project: Build & Apply

Create a Select Dropdown for Choosing a Fruit

📖 Scenario: You are building a simple web form where users can pick their favorite fruit from a list.

🎯 Goal: Create a select dropdown menu with fruit options so users can choose one fruit.

📋 What You'll Learn

Use a <select> element with the id fruit-select.

Add exactly three <option> elements inside the select.

The options must be Apple, Banana, and Cherry with values apple, banana, and cherry respectively.

Include a label for the select with the text Choose a fruit: and link it properly using the for attribute.

Ensure the dropdown is accessible and uses semantic HTML.

💡 Why This Matters

🌍 Real World

Select dropdowns are common in web forms for choosing options like countries, fruits, or preferences.

💼 Career

Understanding how to build accessible and semantic form controls is essential for front-end web development jobs.

1

Create the HTML skeleton with a label

Write the basic HTML structure with a <label> element that has the text Choose a fruit: and the attribute for="fruit-select".

HTML

Choose a fruit:

Need a hint?

Use a <label> tag with the for attribute matching the select's id.

2

Add the select element with id

Add a <select> element with the id fruit-select right after the label.

HTML

Choose a fruit:

  

Need a hint?

The id attribute connects the select to the label.

3

Add three option elements inside the select

Inside the <select id="fruit-select">, add three <option> elements with these exact values and texts: value="apple" with text Apple, value="banana" with text Banana, and value="cherry" with text Cherry.

HTML

Choose a fruit:

  

Need a hint?

Each option needs a value attribute and visible text.

4

Wrap the label and select in a form element

Wrap the existing <label> and <select> elements inside a <form> element to complete the structure.

HTML

Need a hint?

A form groups input elements and is good practice for accessibility.