HTML - <select> Tag
Introduction to <select> Tag
The HTML <select> tag is used to create dropdown lists in online forms, allowing users to choose one or more options from a list. The <select> tag, contains <option> tags.
For identification and form submission, attributes like name and id are required. JavaScript enhances functionality while CSS applies styling. Testing on different devices ensures a consistent user experience.
Syntax
Following is the syntax of <select> tag −
<select>
....
</select>
Attributes
The HTML select tag supports Global and Event attributes of HTML along with some specific attributes listed bellow.
| Attribute |
Value |
Description |
| disabled |
disabled |
Disables the input control. The button will not accept user changes, cannot receive focus, and will be skipped when tabbing. |
| autofocus |
autofocus |
Specifies that the drop-down list should automatically receive focus when the page loads. |
| form |
form_id |
Specifies one or more forms. |
| multiple |
multiple |
When set, it allows multiple items to be selected simultaneously. |
| name |
name |
Assigns a name to the input control. |
| required |
required |
Before submitting the form, the user must select a value; otherwise, it will not be proceed. |
| size |
number |
Specifies the number of visible items in the drop-down list.
|
Example: Creating Dropdown
In the following program, we use the HTML <select> tag to create a dropdown list. The HTML code includes options for HTML, CSS, and JavaScript, along with a submit button.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!--create a select tag-->
<p>Simple select element</p>
<select>
<option value="">--Chose your option--</option>
<option value="">HTML</option>
<option value="">CSS</option>
<option value="">JavaScript</option>
</select>
<button>Submit</button>
</body>
</html>
Example: Form Selection
Here is another example of the HTML <select> tag. We create a "select" element using the select tag that defines the list options within the "form" element. The HTML code includes a form with text, email, and number inputs, a language dropdown, and a submit button.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!--create a form-->
<h3>HTML "select" element example</h3>
<form> Name: <input type="text">
<br> Email: <input type="email">
<br> Mobile: <input type="number">
<br> Language: <select>
<option value="">--Choose language--</option>
<option value="">Hindi</option>
<option value="">English</option>
</select>
<button>Submit</button>
</form>
</body>
</html>
Example: Disable Select Element
In this program, we use the HTML <select> tag to define a list of options. The "disabled" attribute is used to disable the "select" element. The HTML code creates a disabled dropdown list with options for India, United States, Australia, and Germany.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!--create a select tag-->
<p>HTML 'select' element with 'disabled' attribute</p>
<label for="">Choose your country:-</label>
<select disabled>
<option value="">India</option>
<option value="">United state</option>
<option value="">Australia</option>
<option value="">Germany</option>
</select>
</body>
</html>
Example: Styling Select Elements
In this example, we use the HTML <select> tag to define a list of options. CSS is applied to style the select element. The HTML code creates a styled dropdown list with options for HTML, JavaScript, Java, Python, and C++, labeled as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
select {
width: 200px;
height: 30px;
border: 2px solid blue;
border-radius: 10px;
padding: 5px;
}
select option {
color: green;
}
</style>
</head>
<body>
<!--create a select tag-->
<p>HTML 'select' element with CSS</p>
<label for="">Choose your favorite computer language:-</label>
<select>
<option value="">HTML</option>
<option value="">JavaScript</option>
<option value="">Java</option>
<option value="">Python</option>
<option value="">C++</option>
</select>
</body>
</html>
Supported Browsers
| Tag |
 |
 |
 |
 |
 |
| select |
Yes |
Yes |
Yes |
Yes |
Yes |
html_tags_reference.htm