HTML <option> Tag – Dropdown Item
📌 Introduction
The <option> tag is used to define items inside a <select> dropdown list.
Each <option> represents a single choice the user can select.
👉 It only works inside <select>.
🧱 Syntax
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Option Example</title>
</head>
<body>
<h2>Select a Language</h2>
<form>
<select name="language">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
<br /><br />
<button type="submit">Submit</button>
</form>
</body>
</html>
🖥️ Output Explanation
- Each
<option>becomes a dropdown item - User selects one value
- Only one option is active (by default)
🎯 Important Attributes
1. value
<option value="html">HTML</option>
✔ Value sent to server when form is submitted
2. selected
<option selected>HTML</option>
✔ Makes an option selected by default
3. disabled
<option disabled>Coming Soon</option>
✔ Makes option unselectable
🧠 Important Concept
👉 <option> = single choice inside dropdown
👉 <select> = container for all options
🧩 Example with Values
<select name="country">
<option value="dz">Algeria</option>
<option value="ma">Morocco</option>
<option value="tn">Tunisia</option>
</select>
🎯 Why value is Important
Even if user sees text like:
Algeria
The server receives:
dz
✔ This is useful for databases and APIs
🎨 Styling Example
<option style="color:red;">HTML</option>
🚫 Common Mistakes
- Using
<option>outside<select>❌ - Forgetting
valuein forms ❌ - Not using
namein<select>❌
🧪 Mini Exercise
Create a form with:
- A
<select>for choosing a programming language - At least 5
<option>items - One default selected option
- Submit button