HTML <select> Tag
The <select> tag in HTML is used to create a drop-down list. The <select> tag contains <option> tag to display the available option of the drop-down list.
Note: The <select> tag is used in a form to receive user responses.
Syntax:
<select>
<option>
</option>
...
</select>
Attributes
The table below shows the required attributes and their respective description:
| Attribute | Description |
|---|---|
| autofocus | Specifies that the dropdown should automatically get focus when the page loads. It is a boolean attribute. |
| disabled | Specifies that the select element is disabled. A disabled drop-down list is un-clickable and unusable. It is a boolean attribute. |
| form | Specifies one or more forms that the select element belongs to. |
| multiple | Specifies that the user is allowed to select more than one value in the <select> element. It is a boolean attribute. |
| name | Specifies a name for the drop-down list. Used to reference the form data after submitting the form or to reference the element in JavaScript. |
| required | Specifies that the user should select a value before submitting the form. It is a boolean attribute. |
| size | Specifies the number of visible options in a drop-down list. |
Example 1: In this example, we simply create a drop-down list in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML Select
</title>
</head>
<body>
<h2>Welcome To w3wiki</h2>
<select>
<option value="By the way">BTW</option>
<option value="Talk to you later">TTYL</option>
<option value="To be honest">TBH</option>
<option value=" I don’t know">IDK</option>
</select>
</body>
</html>
Output:
Example 2: This example describes the HTML <select> tag with one pre-selected option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML Select
</title>
</head>
<body style="text-align:center;">
<h1>w3wiki</h1>
<h2>HTML select Tag</h2>
<p>Select one option from drop-down list:</p>
<select>
<option value="GFG">GFG</option>
<option value="OS">OS</option>
<option value="DBMS">DBMS</option>
<option value="Data Structure">
Data Structure
</option>
</select>
</body>
</html>
Output:
Example 3: In this example, we are using an optgroup tag with <select> tag. optgroup tag is used for displaying related options in the drop-down list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML Select
</title>
</head>
<body>
<h2>Welcome To w3wiki</h2>
<label for="Brands">Choose a Brand:</label>
<select name="Brands" id="Brands">
<optgroup label="Tech Brands">
<option value="Google">Google</option>
<option value="Apple">Apple</option>
</optgroup>
<optgroup label="Automative Brands">
<option value="Tesla">Tesla</option>
<option value="audi">Audi</option>
</optgroup>
<optgroup label="Entertainment Brand">
<option value="Disney">Disney</option>
</optgroup>
</select>
</body>
</html>
Output:
Supported Browsers
- Google Chrome: 1
- Edge: 12
- Firefox: 1
- Safari: 2
- Opera: 1
Contact Us