The
<select>tag is used to create a drop-down list in a form.
It allows users to choose one or multiple options from a predefined list.
Each option is defined using the<option>tag, and options can be grouped with<optgroup>.
Syntax
<select name="dropdownName" id="dropdownId" multiple size="4" required>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
</select>Attributes
| Attribute | Description |
|---|---|
| name | Name of the select element, used in form submission. |
| id | Unique identifier for the element. |
| multiple | Allows selection of multiple options. |
| size | Number of visible options without scrolling. |
| required | Makes selection mandatory. |
| disabled | Disables the dropdown entirely. |
| autofocus | Automatically focuses the dropdown when page loads. |
| form | Associates the select with a specific form (useful if outside the form). |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Example</title>
</head>
<body>
<h2>Select Your Favorite Fruit</h2>
<form action="/samples/form_processor.php" method="post">
<label for="fruits">Choose a fruit:</label><br>
<select name="fruits" id="fruits" required>
<option value="">--Select--</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="mango">Mango</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Output
Browser Output
You will see a drop-down menu where users can select a single fruit.
Clicking the arrow shows all available options, and the selected option is sent when submitting the form.
Try it in our TryIt Editor to see how selection works.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
All major browser supports <select> tag
Notes
- The
<select>tag must contain<option>elements. - Use
multiplefor multi-selection lists. - Use
<optgroup>to group related options for better UX. - Always include a placeholder option (
value="") for validation purposes.
Conclusion
The <select> tag provides an organized way for users to pick from a list of choices.
It is widely supported and essential for forms requiring selection input.
