The select element creates a list. Depending on the settings, this can be a drop-down list for selecting one item, or an expanded list in which you can select several items at once.
Let’s create a dropdown list:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select in HTML5</title>
</head>
<body>
<form method="get">
<div class="form-group" style="margin-bottom: 15px;">
<label for="phone">Select Phone:</label>
<select id="phone" name="phone">
<option value="iPhone 12S">iPhone 12S</option>
<option value="lumia 1280">Lumia 1280</option>
<option value="Pixel 6X">Pixel 6X</option>
<option value="Galaxy S12">Galaxy S12</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 15px;">
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
Option elements are placed inside the select element – the elements of the list. Each element option contains an attribute value that stores the value of the element. However, the value of the option element does not have to match the text it displays. For instance:
<option value="iPhone 12S">iPhone 12S</option>
With the help of an attribute, selected we can set the default selected item – it doesn’t have to be the first item in the list:
<select id="phone" name="phone">
<option value="iphone 6s">iPhone 12S</option>
<option value="lumia 950">Lumia 1280</option>
<option value="nexus 5x">Pixel 6X</option>
<option value="galaxy s7" selected>Galaxy S12</option>
</select>
Another attribute disabled can be used to prevent a specific element from being selected. Typically, elements with this attribute are used to create headings:
<select id="phone" name="phone">
<option disabled >Select Phone</option>
<option value="iphone 6s">iPhone 12S</option>
<option value="lumia 950">Lumia 1280</option>
<option value="nexus 5x">Pixel 6X</option>
<option value="galaxy s7" selected>Galaxy S12</option>
</select>
To create a multiple-choice list box, add the multiple attribute to the select element :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select in HTML5</title>
</head>
<body>
<form method="get">
<div class="form-group" style="margin-bottom: 15px;">
<label for="phone">Select Phone:</label>
<select multiple id="phone" name="phone">
<option value="iphone 6s">iPhone 12S</option>
<option value="lumia 950">Lumia 1280</option>
<option value="nexus 5x">Pixel 6X</option>
<option value="galaxy s7">Galaxy S12</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 15px;">
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
Holding down the Ctrl key, we can select several elements in such a list:
Select also allows you to group elements using the
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Option Group Select in HTML5</title>
</head>
<body>
<form method="get">
<div class="form-group" style="margin-bottom: 15px;">
<label for="phone">Select Phone:</label>
<select id="phone" name="phone">
<optgroup label="Apple">
<option value="iphone 6s">iPhone 6S</option>
<option value="iphone 6s plus">iPhone 6S Plus</option>
<option value="iphone 5se">iPhone 5SE</option>
</optgroup>
<optgroup label="Microsoft">
<option value="lumia 950">Lumia 950</option>
<option value="lumia 950 xl">Lumia 950 XL</option>
<option value="lumia 650">Lumia 650</option>
</optgroup>
</select>
</div>
<div class="form-group" style="margin-bottom: 15px;">
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
The use of item groups applies to both a dropdown list and a multi-select list box.