How to create dropdown in html

HtmlHow-ToBeginner · 3 min read

How to Create a Dropdown in HTML: Simple Guide

To create a dropdown in HTML, use the <select> element combined with multiple <option> elements inside it. Each <option> represents a choice in the dropdown list.

📐

Syntax

The dropdown is made with the <select> tag, which acts like a container for options. Inside it, each <option> tag defines one selectable item. You can add attributes like name to identify the dropdown and value to specify the data sent when an option is chosen.

html

<select name="example">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Output

A dropdown box showing options: Option 1, Option 2, Option 3

💻

Example

This example shows a dropdown menu where users can pick their favorite fruit. The selected value can be sent in a form or used in scripts.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dropdown Example</title>
</head>
<body>
  <label for="fruits">Choose a fruit:</label>
  <select id="fruits" name="fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
    <option value="date">Date</option>
  </select>
</body>
</html>

Output

A dropdown labeled 'Choose a fruit:' with options Apple, Banana, Cherry, Date

⚠️

Common Pitfalls

Common mistakes include forgetting to close the <select> or <option> tags, which can break the dropdown. Another issue is not setting the value attribute, which means the form sends the visible text instead of a specific value. Also, avoid putting interactive elements inside <option> tags because they only accept plain text.

html

<!-- Wrong: Missing closing tag -->
<select name="colors">
  <option value="red">Red
  <option value="green">Green</option>
</select>

<!-- Right: Properly closed tags -->
<select name="colors">
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

Output

A dropdown with options Red and Green working correctly

📊

Quick Reference

Element/Attribute	Purpose
	Container for dropdown options
	Defines each choice in the dropdown
name	Identifies the dropdown in forms
value	Data sent when an option is selected
selected	Marks an option as pre-selected

✅

Key Takeaways

Use