Introduction
In HTML, with the help of a select tag, we can create the dropdown list while creating the form where the user can choose one of the options from the given option. If the developer allows the user, then the user also selects multiple options from the given option. We can implement the select tag only inside the HTML form. We can preserve the space by choosing the dropdown menu while accepting the information from the users.
We have the option to choose the specified elements enclosed within the start and end tags of <select>. An illustration showcasing the utilization of the <select> tag is provided below.
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>T-Shirt Color Selection</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
label {
font-size: 18px;
font-weight: bold;
color: #333;
}
select {
font-size: 16px;
padding: 8px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
width: 200px;
background-color: #fff;
color: #555;
}
option {
color: #555;
}
</style>
</head>
<body>
<label for="shirt-colors">What color t-shirt would you like?</label><br>
<select name="shirts" id="shirt-colors">
<option value="red">Red t-shirt</option>
<option value="blue">Blue t-shirt</option>
<option value="orange">Orange t-shirt</option>
</select>
</body>
</html>
Output:
In the provided code snippet, a basic HTML dropdown menu has been generated. Initially, the first choice is visible on the website. Upon selection, all available options become visible to the user.
In the first part of the code, we created a <label> tag that contains the text that introduced the select element. Using the <label> tag is the best practice for the developer. The <label> tag is linked with the preceding dropdown menu that contains the <label> attribute. We can select the element with the help of the ID selector.
In the following procedures, we have generated the select element. The initial tag of the select component includes a pair of properties. One is the name attribute, while the other is the ID attribute. Through the name attribute, we are able to assign a name to the dropdown element. Meanwhile, the ID attribute allows us to pinpoint the chosen element.
In the third phase, the choices list is enclosed within the select element. Every individual option element within possesses a value attribute. This attribute plays a crucial role in gathering data when the form is saved, ensuring that the data is securely stored on the server.
HTML Select Attributes
The select element supports all global attributes provided in HTML. It offers a wide range of attributes, including the following:
- Autocomplete:
By utilizing this attribute, we have the capability to prompt the browser to automatically choose the option on behalf of the user.
- Autofocus:
Enabling the autofocus attribute for the select element will cause it to be focused upon page initialization.
- Deactivated:
By utilizing this attribute, we have the ability to deactivate the entire dropdown functionality within the form element. When the select tag is disabled, the user will be unable to engage with this particular element.
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="shirt-colors" style="font-weight: bold; color: #333; font-size: 16px;">What color t-shirt would you like?</label><br>
<select name="shirts" id="shirt-colors" disabled style="padding: 6px; border-radius: 4px; border: 1px solid #ccc; background-color: #f9f9f9; font-size: 14px; color: #555;">
<option value="red">Red t-shirt</option>
<option value="blue">Blue t-shirt</option>
<option value="orange">Orange t-shirt</option>
</select>
</body>
</html>
Output:
Note: When the user clicks on the dropdown option, there is nothing to be happened.
We can also apply the disabled attribute to a specific option. Let's explore this in the example below.
Example 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="shirt-colors" style="font-size: 20px; color: #333; margin-bottom: 10px;">What color t-shirt would you like?</label><br>
<select name="shirts" id="shirt-colors" style="padding: 8px 12px; font-size: 16px; border-radius: 4px; border: 1px solid #ccc;">
<option value="red" style="background-color: #ff4c4c; color: #fff;">Red t-shirt</option>
<option value="blue" disabled style="background-color: #cccccc; color: #666;">Blue t-shirt (out of stock)</option>
<option value="orange" style="background-color: #ffa500; color: #fff;">Orange t-shirt</option>
</select>
</body>
</html>
Output:
Form:
We can associate the form tag with the help of <select> tag by the help of <form> tag. We can also use the <select> tag outside the form tag. We can also use the ID as the value of the form that belongs to the <form> tag.
Multiple:
By default, HTML allows users to choose only a single option from a dropdown list. However, by making certain adjustments, users can select multiple options concurrently. This results in a scrollable scrollbar being displayed instead of the standard dropdown. To select more than one option simultaneously, users need to hold down the ctrl or shift key on Windows, or the command or shift key on macOS. The following example demonstrates this functionality.
Example 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="shirt-colors">Choose the color of the t-shirt:</label><br>
<select name="shirts" id="shirt-colors" multiple style="width: 200px; height: 150px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; padding: 8px;">
<option value="red">Red t-shirt</option>
<option value="blue">Blue t-shirt</option>
<option value="orange">Orange t-shirt</option>
<option value="green">Green t-shirt</option>
<option value="grey">Grey t-shirt</option>
<option value="pink">Pink t-shirt</option>
</select>
</body>
</html>
Output:
For a better alternative, we should have taken the help of a check box for this.
- Name: We can use the name attribute to assign the dropdown menu to send the data to the server. If the user does not select any attribute, then the name attribute does not send any data to the server.
- Required: When we apply the required attribute to any select tag, then that input tag becomes the required field. Without the data from the required field, the form does not send the data to the server.
- Size: With the help of the size attribute, how many items are displayed in the dropdown list? It Is displayed without scrolling the list. Let's understand this by taking an example. In the below example, I have taken the size as 3.
Example 5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Style for the select element */
select {
width: 200px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* Style for the option elements */
option {
padding: 5px;
font-size: 16px;
color: #333;
}
/* Style for the select element when it's focused */
select: focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
</style>
</head>
<body>
<label for="shirt-type">What type of t-shirt would you like?</label><br>
<select name="shirts" id="shirt-type" multiple size="3">
<option value="red">Red t-shirt</option>
<option value="blue">Blue t-shirt</option>
<option value="orange">Orange t-shirt</option>
<option value="green">Green t-shirt</option>
<option value="grey">Grey t-shirt</option>
<option value="pink">Pink t-shirt</option>
</select>
</body>
</html>
Output:
Other HTML Select Tricks
We can further personalize the dropdown menu in various manners. Let's explore several customization options.
1. Change the HTML and select the Default Option.
The <input> tag in HTML automatically chooses the initial <option> tag as its nested selection. To establish a different option as the default first choice, we can use the following illustration. In this demonstration, we designate the second option as the default selection.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="shirt-colors" style="font-weight: bold;">What color t-shirt would you like?</label><br>
<select name="shirts" id="shirt-colors" style="padding: 5px; border-radius: 3px;">
<option value="red" style="color: red;">Red t-shirt</option>
<option value="blue" selected style="color: blue;">Blue t-shirt</option>
<option value="orange" style="color: orange;">Orange t-shirt</option>
</select>
</body>
</html>
Output:
2. Add Placeholder Text to HTML
With placeholders, we have the ability to avoid showing the list as the default choice. Rather than showing the default option, we can present it as "select one". To achieve this, there are specific steps we need to follow. The initial step involves defining your placeholder content within an <option> element, while the subsequent step is to include both the disabled and selected attributes to this element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Apply some basic styling */
label {
font-weight: bold;
}
select {
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* Customize the dropdown arrow */
select {
background-image: url('dropdown_arrow.png');
background-repeat: no-repeat;
background-position: right center;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/* Style the options */
select option {
background-color: #fff;
color: #333;
}
/* Style the selected option */
select option:checked {
background-color: #f0f0f0;
font-weight: bold;
}
</style>
</head>
<body>
<label for="shirt-colors">What color t-shirt would you like?</label><br>
<select name="shirts" id="shirt-colors">
<option value="null" selected disabled>Choose one...</option>
<option value="red">Red t-shirt</option>
<option value="blue">Blue t-shirt</option>
<option value="orange">Orange t-shirt</option>
</select>
</body>
</html>
Output:
3. Group HTML select Items.
We can also separate all the response items into different groups in HTML. If we do this, it helps us to be handy for particularly large dropdowns. We can achieve this by taking the help of <optgroup>. Inside this tag, we have to take <select> tag in each group. Then, we have to add the <label> attribute in each <optgroup> tag. Then, we have to write the <option> tag inside the <optgroup> tag. Let's understand this with the help of an example.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS properties */
label {
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
select {
width: 200px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
optgroup {
font-weight: bold;
color: #666;
}
option {
padding: 5px;
}
</style>
</head>
<body>
<label for="shirt-colors">What color t-shirt would you like?</label><br>
<select name="shirts" id="shirt-colors">
<optgroup label="Regular">
<option value="red">Red t-shirt</option>
<option value="blue">Blue t-shirt</option>
<option value="orange">Orange t-shirt</option>
</optgroup>
<optgroup label="Limited Edition">
<option value="green">Green t-shirt</option>
<option value="grey">Grey t-shirt</option>
<option value="pink">Pink t-shirt</option>
</optgroup>
</select>
</body>
</html>
Output:
How to Use HTML Select in a Form
As per the standard practice in HTML, the <input> tag can be employed within the <form> tag. By incorporating this, users are able to input data and subsequently submit the form. It is possible to enclose the <input> tag within the <form> tag. This concept can be better understood through an illustrative example.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form {
background-color: #e5f5f8;
border-radius: 10px;
font-family: Avenir;
padding: 20px;
width: 200px;
margin: 0 auto; /* Centers the form horizontally */
}
#form-prompt {
font-size: 24px;
margin-top: 0;
margin-bottom: 5px;
}
button {
margin-top: 10px;
background-color: #4CAF50; /* Green background color */
color: white; /* White text color */
border: none; /* Remove border */
padding: 10px 20px; /* Add padding */
border-radius: 5px; /* Add border-radius */
cursor: pointer;
}
button:hover,
input:hover,
label:hover {
cursor: pointer;
}
/* Style the select dropdown */
select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 10px;
}
</style>
</head>
<body>
<form id="form">
<label for="shirt-colors">What color t-shirt would you like?</label><br>
<select name="shirts" id="shirt-colors">
<option value="red">Red t-shirt</option>
<option value="blue">Blue t-shirt</option>
<option value="orange">Orange t-shirt</option>
</select>
<div><button type="submit">Submit</button></div>
</form>
<script>
var form = document.getElementById('form');
form.addEventListener('submit', showMessage);
function showMessage(event) {
alert("Your response has been recorded. (Not actually, this is just a demo!)");
event.preventDefault();
}
</script>
</body>
</html>
Output:
Example:
We also have the option to place the <select> tag outside of the form element. It is possible to link the <select> tag with a form using the following code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
select {
margin-bottom: 10px;
}
form {
background-color: #e5f5f8;
border-radius: 10px;
font-family: Avenir;
padding: 20px;
width: 200px;
}
#form-prompt {
font-size: 24px;
margin-top: 0;
margin-bottom: 5px;
}
button {
margin-top: 10px;
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
button:hover, input:hover, label:hover {
cursor: pointer;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
</style>
</head>
<body>
<label for="shirt-colors">What color t-shirt would you like?</label><br>
<select name="shirts" id="shirt-colors" form="form">
<option value="red">Red t-shirt</option>
<option value="blue">Blue t-shirt</option>
<option value="orange">Orange t-shirt</option>
</select>
<form id="form">
<div><button type="submit">Submit</button></div>
</form>
<script>
var form = document.getElementById('form');
form.addEventListener('submit', showMessage);
function showMessage(event) {
alert("Your response has been recorded. (Not actually, this is just a demo!)");
event.preventDefault();
}
</script>
</body>
</html>
Output:
HTML Select: An Easy Solution for Dropdowns
When there is a requirement to generate an HTML dropdown menu, opting for an HTML <select> tag is a straightforward solution. This element effectively manages the required functionality for developers while also conserving space.