Tag <select> In Html

In this article, we’ll look at Tag select and will provide you with some examples in order to help you learn better.

The <select> tag in HTML is used to create a drop-down list of options for users to select from. It is a form control element that is commonly used in web forms to allow users to select one or more options from a list.

Creating a drop-down list with options using select:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<select>
<option value="AI">Artificial Intelligence</option>
<option value="VR">Virtual Reality</option>
<option value="IoT">Internet of Things</option>
<option value="Blockchain">Blockchain</option>
<option value="5G">5G</option>
<option value="Cloud">Cloud Computing</option>
<option value="BigData">Big Data</option>
<option value="CyberSecurity">Cyber Security</option>
</select>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


Tag <select> Uses

A drop-down list is generated utilizing the <select> element.

Most commonly, <select> field is used in forms for collecting input from users.

Using the name attribute will reference the form data after the form is submitted (without the name attribute, the drop-down list will not submit data).

Whenever we use Tag Select, the id attribute is required in order to link the drop-down list to a label. The options in the drop-down list are determined by the <option> tags contained in the select element.

Advice: To ensure optimal usability, always add the <label> tag.

Here’s an example of a drop-down list for selecting a country:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<body>
<select>
<option value="AF">Afghanistan</option>
<option value="AX">Aland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
</select>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS can also be applied to <select> here is how:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<style>
select {
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: none;
background-color: #f2f2f2;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
</style>
</head>
<body>
<select>
<option value="AX">Aland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
</select>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

You can implement CSS to make you menu look attractive:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!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 Box</title>
<style>
body {
background:#2d2d2d;
display:flex;
/*justify-content: center;*/
/*align-items:center;*/
flex-wrap:wrap;
padding:0;
margin:0;
height:100vh;
width:100vw;
font-family: sans-serif;
color:#FFF;
}
.select {
display:flex;
flex-direction: column;
position:relative;
width:250px;
height:40px;
margin-left:130px;
margin-top:50px;
}
.option {
padding:0 30px 0 10px;
min-height:40px;
display:flex;
align-items:center;
background:#333;
border-top:#222 solid 1px;
position:absolute;
top:0;
width: 100%;
pointer-events:none;
order:2;
z-index:1;
transition:background .4s ease-in-out;
box-sizing:border-box;
overflow:hidden;
white-space:nowrap;
}
.option:hover {
background:#666;
}
.select:focus .option {
position:relative;
pointer-events:all;
}
input {
opacity:0;
position:absolute;
left:-99999px;
}
input:checked + label {
order: 1;
z-index:2;
background:#666;
border-top:none;
position:relative;
}
input:checked + label:after {
content:";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
position:absolute;
right:10px;
top:calc(50% -- 2.5px);
pointer-events:none;
z-index:3;
}
input:checked + label:before {
position:absolute;
right:0;
height: 40px;
width: 40px;
content: ";
background:#666;
}
</style>
</head>
<body>
<div class="select" tabindex="1">
<input class="selectopt" name="test" type="radio" id="opt1" checked>
<label for="opt1" class="option" selected>Programming Languages</label>
<input class="selectopt" name="test" type="radio" id="opt2">
<label for="opt2" class="option">Java</label>
<input class="selectopt" name="test" type="radio" id="opt3">
<label for="opt3" class="option">Python</label>
<input class="selectopt" name="test" type="radio" id="opt4">
<label for="opt4" class="option">PHP</label>
<input class="selectopt" name="test" type="radio" id="opt5">
<label for="opt5" class="option">Node Js</label>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

HTML Select Tag Importance

The <select> tag in HTML is an important form element used to create dropdown menus on web pages. It allows users to select one or more options from a list of predefined options.

The main importance of the <select> tag is that it provides a user-friendly way for visitors to interact with the website. Dropdown menus created with the <select> tag are easy to use and can save a lot of space on the page compared to listing all the options separately.

The <select> tag is also useful in web forms where users need to select one or more options from a list. It allows website owners to collect data in a standardized way, making it easier to process and analyze the information.

Additionally, the <select> tag can be customized using CSS to match the website’s design and branding, making it an essential tool for creating visually appealing and user-friendly interfaces.


Attributes

Global

The Tag select <select> is compatible with Global Attributes in HTML.

Event

The Tag select <select> is also compatible with Event Attributes in HTML.


Attributes List

Attributes Value Overview
autofocus autofocus Indicates that as soon as the page loads, the drop-down list should get focus.
disabled disabled This enables the disabling of a drop-down list.
form form_id Determines the form of the drop-down list.
multiple multiple Allows multiple options to be selected simultaneously.
name name Provides a name for the drop-down menu.
required required Ensure that a value must be selected before submitting a form.
size number Specifies how many options are visible in a drop-down menu.

Browser Compatibility

Element
<select> Yes Yes Yes Yes Yes

Select Tag Key Benefits

Here are some of the key benefits:

  • The <select> tag provides an easy and intuitive way for users to select options from a list. This can help to improve the user experience of web forms and other interfaces, making it easier for users to provide the information that is needed.
  • The <select> tag is accessible to users with disabilities, including those who use assistive technologies such as screen readers. This can help to improve the accessibility of web forms and other interfaces for a wider range of users.
  • By using the <select> tag, web developers can create a consistent user interface across their website or application. This can help to improve the user experience by making it easier for users to navigate and interact with the interface.
  • Using the <select> tag ensures that your HTML code is valid and conforms to web standards. This can help to improve the quality and maintainability of your code, making it easier to modify and update in the future.
  • When a form is submitted with a <select> element, the value of the selected option is sent to the server. This makes it easy for developers to collect and process user data, and can be used for a wide range of purposes, such as storing data in a database or sending emails.
If this article was informative enough to fulfill your educational desires then do share meaningful information with your friends by clicking on the social media handlings below.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon