The <select> tag is a fundamental HTML form element that allows you to create interactive dropdown lists. Whether you want to offer a choice of countries, categories, or preferences, this tag provides an intuitive and compact user interface for presenting multiple options.
Mastering the <select> tag is essential for any web developer looking to create professional and accessible forms. If you're new to HTML, our comprehensive HTML course will guide you step by step through creating interactive forms.
The <select> tag significantly reduces the space occupied by a form while offering numerous choice options to your users 📋
Â
Definition and basic syntax
Fundamental structure
The <select> tag works as a container that groups several options from which the user can make their choice. It is always used in combination with <option> tags that define each item in the list.
<select name="course">
<option value="html">HTML Course</option>
<option value="css">CSS Course</option>
<option value="javascript">JavaScript Course</option>
</select>In this example, we create a dropdown list allowing users to choose a course. The name attribute identifies the field when submitting the form, while the value attribute of each option defines the value transmitted to the server.
Â
Key characteristics
The <select> tag has several essential characteristics to understand:
- It automatically creates a browser-native dropdown list interface
- By default, the first option is selected
- It can be used inside a
formelement for data submission - The visual style varies depending on the browser and operating system
- It natively supports keyboard navigation
Â
Select tag attributes
Essential attributes
Here are the most commonly used attributes with the <select> tag:
| Attribute | Description | Example |
|---|---|---|
| name | Identifies the field for form submission | name="country" |
| id | Unique identifier for CSS and JavaScript | id="countrySelect" |
| required | Makes selection mandatory | required |
| disabled | Disables the dropdown list | disabled |
| multiple | Allows multiple selection | multiple |
| size | Number of options visible simultaneously | size="5" |
| autofocus | Automatically focuses on page load | autofocus |
Â
The multiple attribute
The multiple attribute transforms the dropdown list into a list allowing multiple simultaneous selections. Users can then hold the Ctrl key (or Cmd on Mac) to select multiple options.
<label for="skills">Select your skills:</label>
<select name="skills" id="skills" multiple size="5">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="php">PHP</option>
</select>When using the multiple attribute, remember to add [] to the field name (e.g., name="skills[]") if you're using PHP server-side, to receive an array of values.
Â
The size attribute
The size attribute defines the number of options visible without having to scroll the list. This attribute is particularly useful in combination with multiple to display several options at once.
<select name="level" size="3">
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
<option value="expert">Expert</option>
</select>Â
The option and optgroup tags
The option tag
Each item in the dropdown list is defined by an <option> tag. This tag accepts several important attributes:
<select name="status">
<option value="" disabled selected>Choose a status</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="pending">Pending</option>
</select>In this example, the first option serves as a placeholder thanks to the combination of disabled and selected attributes. It guides the user without being actually selectable upon submission.
Â
Option tag attributes
| Attribute | Description |
|---|---|
| value | Value sent to the server upon submission |
| selected | Pre-selects the option on page load |
| disabled | Makes the option unselectable |
| label | Alternative text for the option (rarely used) |
Â
Grouping options with optgroup
The <optgroup> tag allows you to organize options into logical groups, thus improving the readability of long dropdown lists.
<label for="believemy-course">Choose a Believemy course:</label>
<select name="course" id="believemy-course">
<option value="">Select a course</option>
<optgroup label="Web Development">
<option value="html">HTML - Fundamentals</option>
<option value="css">CSS - Master design</option>
<option value="javascript">JavaScript - Dynamic pages</option>
</optgroup>
<optgroup label="Backend Development">
<option value="python">Python - Programming</option>
<option value="php">PHP - Dynamic websites</option>
<option value="nodejs">Node.js - Server-side JavaScript</option>
</optgroup>
<optgroup label="Databases">
<option value="mysql">MySQL - SQL queries</option>
<option value="mongodb">MongoDB - NoSQL</option>
</optgroup>
</select>Groups created by <optgroup> are not selectable; they only serve to visually structure the options. The label attribute defines the text displayed for each group.
Â
Advanced practical examples
Complete registration form
Here is an example of a registration form using multiple dropdown lists professionally:
<form action="/registration" method="post">
<div class="form-group">
<label for="title">Title:</label>
<select name="title" id="title" required>
<option value="">Select</option>
<option value="mrs">Mrs.</option>
<option value="mr">Mr.</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="country">Country:</label>
<select name="country" id="country" required>
<option value="">Choose your country</option>
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
<option value="CA">Canada</option>
<option value="AU">Australia</option>
<option value="DE">Germany</option>
</select>
</div>
<div class="form-group">
<label for="experience">Experience level:</label>
<select name="experience" id="experience">
<option value="beginner" selected>Beginner (0-1 year)</option>
<option value="junior">Junior (1-3 years)</option>
<option value="confirmed">Confirmed (3-5 years)</option>
<option value="senior">Senior (5+ years)</option>
</select>
</div>
<button type="submit">Register</button>
</form>Â
Dropdown list with JavaScript
The <select> tag integrates perfectly with JavaScript to create dynamic interactions. Here is an example of dependent dropdown lists:
<label for="category">Category:</label>
<select name="category" id="category">
<option value="">Choose a category</option>
<option value="frontend">Frontend</option>
<option value="backend">Backend</option>
</select>
<label for="technology">Technology:</label>
<select name="technology" id="technology" disabled>
<option value="">Select a category first</option>
</select>
<script>
const category = document.getElementById('category');
const technology = document.getElementById('technology');
const technologies = {
frontend: ['HTML', 'CSS', 'JavaScript', 'React', 'Vue.js'],
backend: ['PHP', 'Python', 'Node.js', 'Java', 'Ruby']
};
category.addEventListener('change', function() {
technology.innerHTML = '';
if (this.value) {
technology.disabled = false;
const options = technologies[this.value];
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = 'Choose a technology';
technology.appendChild(defaultOption);
options.forEach(function(tech) {
const option = document.createElement('option');
option.value = tech.toLowerCase();
option.textContent = tech;
technology.appendChild(option);
});
} else {
technology.disabled = true;
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = 'Select a category first';
technology.appendChild(defaultOption);
}
});
</script>This code creates two linked dropdown lists: the second one fills dynamically based on the choice made in the first one.
Â
Accessibility and best practices
Associating a label
To ensure the accessibility of your forms, you must always associate a label tag with your <select> element. This association can be done in two ways:
<!-- Method 1: Using the for attribute -->
<label for="language">Preferred language:</label>
<select name="language" id="language">
<option value="en">English</option>
<option value="fr">French</option>
</select>
<!-- Method 2: Wrapping the select in the label -->
<label>
Preferred language:
<select name="language">
<option value="en">English</option>
<option value="fr">French</option>
</select>
</label>A properly associated label allows screen readers to announce the purpose of the field and provides a larger click area for users.
Â
Validation and error messages
Use HTML5 attributes for native validation and provide clear feedback to users:
<label for="goal">Your learning goal:</label>
<select name="goal" id="goal" required aria-describedby="goal-help">
<option value="">Select a goal</option>
<option value="career-change">Career change</option>
<option value="skill-upgrade">Skill upgrade</option>
<option value="personal">Personal interest</option>
</select>
<small id="goal-help">This field helps us personalize your journey.</small>Â
Best practices to remember
- Always use an associated
<label>for accessibility - Provide an explicit default option ("Select...", "Choose...")
- Use
<optgroup>for long lists (more than 10 options) - Avoid overly long lists: beyond 15-20 options, consider a search field
- Test keyboard navigation (tab, arrows, letters)
- Use the
requiredattribute for mandatory fields
Â
Styling a select with CSS
Native style limitations
The <select> tag is notoriously difficult to style because its appearance is largely controlled by the browser and operating system. However, some CSS properties can be applied:
select {
/* Dimensions and spacing */
width: 100%;
padding: 12px 16px;
/* Borders and rounded corners */
border: 2px solid #e0e0e0;
border-radius: 8px;
/* Typography */
font-family: inherit;
font-size: 16px;
color: #333;
/* Background and appearance */
background-color: #ffffff;
cursor: pointer;
/* Remove native appearance (be careful with accessibility) */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* Add custom arrow */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 20px;
}
select:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
select:disabled {
background-color: #f5f5f5;
color: #999;
cursor: not-allowed;
}Â
Styling options
The styling possibilities for <option> tags are very limited. Only a few properties work consistently:
option {
padding: 8px;
background-color: #ffffff;
color: #333;
}
option:disabled {
color: #999;
}
optgroup {
font-weight: bold;
font-style: normal;
}For full control over appearance, you'll need to use JavaScript libraries like Select2, Choices.js, or create a custom component. However, be careful to preserve accessibility!
Â
Browser compatibility
The <select> tag enjoys excellent compatibility with all modern and older browsers:
| Browser | Minimum version | Support |
|---|---|---|
| Chrome | 1.0 | Full |
| Firefox | 1.0 | Full |
| Safari | 1.0 | Full |
| Edge | 12 | Full |
| Opera | 2.0 | Full |
| Internet Explorer | 5.5 | Full |
HTML5 attributes like required and autofocus have been supported by all modern browsers for many years.
Â
Frequently asked questions about the select tag
What is the difference between select and input type radio?
The <select> tag is ideal when you have more than 4-5 options because it saves space by displaying choices in a dropdown list. Radio buttons (<input type="radio">) are preferable for a small number of options (2-4) as they allow users to see all possibilities immediately without additional interaction.
Â
How do I pre-select an option in a select?
To pre-select an option, add the selected attribute to the relevant <option> tag. For example: <option value="us" selected>United States</option>. Only one option can have this attribute (unless multiple is used).
Â
How do I get the selected value in JavaScript?
You can use the value property of the select element: document.getElementById('mySelect').value. For multiple selections, use selectedOptions which returns a collection of the selected options.
Â
How can I learn HTML thoroughly?
To master HTML and create professional forms, our course to get started with HTML guides you step by step. You will learn to use all form tags, including <select>, with practical exercises and real projects.