HtmlHow-ToBeginner · 3 min read

How to Create Select Option in HTML: Simple Guide

Use the <select> tag to create a dropdown menu and add <option> tags inside it for each choice. Each <option> represents one selectable item in the dropdown list.

📐

Syntax

The <select> element creates a dropdown list. Inside it, each <option> defines a choice the user can pick. You can add attributes like value to <option> to specify the data sent when the form is submitted.

html

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

Output

A dropdown menu with three options labeled 'Option 1', 'Option 2', and 'Option 3'.

💻

Example

This example shows a simple dropdown menu where users can select their favorite fruit. The selected option's value is sent when the form is submitted.

html

<form>
  <label for="fruits">Choose a fruit:</label>
  <select id="fruits" name="fruit">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
  </select>
  <button type="submit">Submit</button>
</form>

Output

A labeled dropdown menu with options: Apple, Banana, Cherry, and a submit button.

⚠️

Common Pitfalls

Forgetting to wrap <option> tags inside a <select> element causes the dropdown not to appear.
Not setting the value attribute means the displayed text is sent on form submission, which might not be desired.
Using duplicate value attributes can confuse form processing.
Not associating a <label> with the <select> hurts accessibility.

html

<!-- Wrong: options outside select -->
<option value="1">One</option>
<option value="2">Two</option>

<!-- Right: options inside select -->
<select>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

Output

Only the second snippet renders a dropdown menu; the first snippet shows no dropdown.

📊

Quick Reference

Element/Attribute	Purpose
	Creates the dropdown list container
	Defines each selectable item inside the dropdown
value (attribute)	Specifies the data sent when an option is selected
selected (attribute)	Marks an option as pre-selected when the page loads
name (attribute on select)	Names the dropdown for form submission
label (element)	Associates a text label with the dropdown for accessibility

✅

Key Takeaways

Use