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