HTML <select> tag

This tag helps in making the drop-down list on the web page. This is highly used in HTML forms for taking the input from user.

You can use the id attribute for linking the drop-down list to the label.

The options of drop-down list are specified by the <option> tags which are found inside the select element. The <label> tag should always be added for optimum accessibility standards.

Syntax:

<body>
<label for="#">#</label>
<select name="#" id="#">
<option value="#">#</option>
<option value="#"># </option>
<option value="#"># </option>
</select>
</body>

Example

In this example, we make a drop-down list containing multiple options:

<!DOCTYPE html>
<html>
<head>
<title>HTML select tag </title>
</head>
<body>
<label for="countries">pick a country:</label>
<select name="country" id="country">
<option value="India">India</option>
<option value="America">America </option>
<option value="Canada">Canada </option>
<option value="France">France </option>
<option value="Japan">japan</option>
<option value="Nepal">Nepal </option>
</select>
</body>
</html>

Output:

Attributes of Select Tag

1) autofocus

The value determined by this attribute is "autofocus".          This attribute is used to focus the drop-down list on page load.

2) disabled

The value determined by this attribute is "   disabled".          This attribute is used disable the control and hence user cannot interact with the drop-down list.

3) form

The value determined by this attribute is " form-id".  This attribute is used to specify one or more forms, to which select belong to.

4) multiple

The value determined by this attribute is " multiple". This attribute is used to select multiple options from the list.

5) name

The value determined by this attribute is " name" . This attribute is used to determine the name for the drop-down list.

6) required

The value determined by this attribute is "required". This attribute used to select the field before form submittion.

7) size

The value determined by this attribute is " number". This attribute is used to specify the visible number of options in the list.

Now, we are adding one more example so that you can easily understand the concept of select tag.

Example:

In this example, we use the select tag with the optgroup tag:

<!DOCTYPE html>
<html>
<head>
<title>HTML select tag </title>
</head>
<body>
<label for="countries">pick a country:</label>
<select name="country" id="country">
<option value="India">India</option>
<option value="America"> America </option>
<option value="Canada"> Canada </option>
<option value="France"> France </option>
</optgroup>
<optgroup label="Europeancompanies">
<option value="europe">europe</option>
<option value="britian">britian</option>
</optgroup>
</select>
</body>
</html>

Output:

Browser support:

List of browsers that support html <select> tag are mentioned below:

Chrome: Yes

Microsoft Edge: Yes – version 12 needed

Firefox: Yes – version 1 needed

Safari: Yes

Opera: Yes