HTML <select> Tag – Dropdown List
📌 Introduction
The <select> tag is used to create a dropdown list in HTML.
It allows users to choose one or multiple options from a list.
It is commonly used in:
- Country selection
- Category selection
- Forms (registration, filters, settings)
🧱 Syntax
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Select Example</title>
</head>
<body>
<h2>Select Your Country</h2>
<form>
<label>Country:</label>
<select>
<option>Algeria</option>
<option>Morocco</option>
<option>Tunisia</option>
<option>Egypt</option>
</select>
<br /><br />
<button type="submit">Submit</button>
</form>
</body>
</html>
🖥️ Output Explanation
- A dropdown menu appears
- User selects one option
- Only one value is chosen by default
🎯 Important Elements
1. <select>
Creates the dropdown container.
2. <option>
Represents each selectable item.
<option>Algeria</option>
⚙️ Useful Attributes
1. value
<option value="dz">Algeria</option>
✔ Value sent to server
2. selected
<option selected>Algeria</option>
✔ Default selected option
3. multiple
<select multiple></select>
✔ Allows multiple selections
🧠 Important Concept
👉 <select> = dropdown container
👉 <option> = items inside dropdown
🧩 Example with Values
<select name="country">
<option value="dz">Algeria</option>
<option value="ma">Morocco</option>
<option value="tn">Tunisia</option>
</select>
🎨 Styling Example
<select style="padding:5px;">
<option>Option 1</option>
</select>
🚫 Common Mistakes
- Using
<option>outside<select>❌ - Forgetting
valuein forms ❌ - Not using
namein<select>❌
🧪 Mini Exercise
Create a form with:
- A dropdown for selecting a language
- At least 4 options
- One default selected option
- Submit button