Form Control
HTML 2.0
The select element creates a dropdown menu that allows users to choose one or more options from a list. It contains <option> elements that define the available choices.
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="">Choose a country</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
<option value="au">Australia</option>
</select>
</form>
< select name = " fieldname " >
< option value = " value1 " > Option 1 </ option >
< option value = " value2 " > Option 2 </ option >
The select element wraps <option> elements that define each choice in the dropdown.
Attribute Description Example nameName for form data name="color"multipleAllow multiple selections multiplesizeNumber of visible options size="5"requiredMakes selection mandatory requireddisabledDisables the select disabledautofocusAuto-focus on page load autofocusformAssociates with form by ID form="myForm"autocompleteEnable/disable autocomplete on, off
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="size">T-Shirt Size:</label>
<select id="size" name="size" required>
<option value="">Select size</option>
<option value="xs">Extra Small</option>
<option value="s">Small</option>
<option value="m" selected>Medium</option>
<option value="l">Large</option>
<option value="xl">Extra Large</option>
</select>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="department">Department (required):</label>
<select id="department" name="department" required>
<option value="">-- Please Choose --</option>
<option value="sales">Sales</option>
<option value="marketing">Marketing</option>
<option value="engineering">Engineering</option>
<option value="support">Support</option>
</select>
<button type="submit">Submit</button>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="skills">Select Your Skills:</label>
<select id="skills" name="skills" multiple size="5">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
</select>
<small>Hold Ctrl (Cmd on Mac) to select multiple</small>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="car">Choose a Car:</label>
<select id="car" name="car">
<option value="">Select a car</option>
<optgroup label="German Cars">
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="mercedes">Mercedes</option>
</optgroup>
<optgroup label="Japanese Cars">
<option value="honda">Honda</option>
<option value="toyota">Toyota</option>
<option value="nissan">Nissan</option>
</optgroup>
<optgroup label="American Cars">
<option value="ford">Ford</option>
<option value="chevrolet">Chevrolet</option>
<option value="tesla">Tesla</option>
</optgroup>
</select>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="locked">Locked Selection:</label>
<select id="locked" name="locked" disabled>
<option value="option1">Option 1</option>
<option value="option2" selected>Option 2 (locked)</option>
<option value="option3">Option 3</option>
</select>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="product">Product:</label>
<select id="product" name="product">
<option value="">Select product</option>
<option value="basic">Basic Plan - $9.99</option>
<option value="pro">Pro Plan - $19.99</option>
<option value="enterprise" disabled>Enterprise Plan - Contact Sales</option>
<option value="free">Free Trial</option>
</select>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="colors">Pick Colors:</label>
<select id="colors" name="colors" size="4">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="purple">Purple</option>
<option value="orange">Orange</option>
</select>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="country2">Country:</label>
<select id="country2" name="country" required>
<option value="">Choose country</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
<label for="state">State/Province:</label>
<select id="state" name="state" required disabled>
<option value="">First select country</option>
</select>
</form>
<script>
const states = {
us: ['California', 'Texas', 'New York', 'Florida'],
ca: ['Ontario', 'Quebec', 'British Columbia', 'Alberta']
};
document.getElementById('country2').addEventListener('change', (e) => {
const state = document.getElementById('state');
const country = e.target.value;
state.innerHTML = '<option value="">Choose state</option>';
if (country && states[country]) {
state.disabled = false;
states[country].forEach(s => {
const opt = document.createElement('option');
opt.value = s.toLowerCase().replace(' ', '-');
opt.textContent = s;
state.appendChild(opt);
});
} else {
state.disabled = true;
}
});
</script>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="tags">Tags:</label>
<select id="tags" name="tags" size="4">
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
</select>
<input type="text" id="new-tag" placeholder="New tag">
<button type="button" onclick="addTag()">Add Tag</button>
<button type="button" onclick="removeTag()">Remove Selected</button>
</form>
<script>
function addTag() {
const input = document.getElementById('new-tag');
const select = document.getElementById('tags');
const value = input.value.trim();
if (value) {
const option = document.createElement('option');
option.value = value.toLowerCase();
option.textContent = value;
select.appendChild(option);
input.value = '';
}
}
function removeTag() {
const select = document.getElementById('tags');
const selected = select.selectedOptions;
Array.from(selected).forEach(opt => opt.remove());
}
</script>
Interactive code playground requires JavaScript. Here's the code:
<form id="form-select">
<label for="fruits">Select Fruits:</label>
<select id="fruits" name="fruits" multiple size="5">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="date">Date</option>
<option value="elderberry">Elderberry</option>
</select>
<button type="button" onclick="showSelection()">Show Selection</button>
</form>
<div id="result"></div>
<script>
function showSelection() {
const select = document.getElementById('fruits');
const selected = Array.from(select.selectedOptions).map(opt => opt.value);
document.getElementById('result').textContent =
'Selected: ' + (selected.length ? selected.join(', ') : 'None');
}
</script>
Interactive code playground requires JavaScript. Here's the code:
<style>
.custom-select {
padding: 10px 15px;
border: 2px solid #e5e7eb;
border-radius: 6px;
background: white;
font-size: 16px;
cursor: pointer;
transition: border-color 0.2s;
}
.custom-select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.custom-select:disabled {
background: #f3f4f6;
cursor: not-allowed;
}
</style>
<label for="styled">Styled Select:</label>
<select id="styled" class="custom-select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
< label for = " priority " > Priority: </ label >
< select id = " priority " name = " priority " >
< option value = " high " > High </ option >
< option value = " medium " > Medium </ option >
< option value = " low " > Low </ option >
< option value = "" > Select priority </ option >
< option value = " high " > High </ option >
< option value = " medium " > Medium </ option >
< option value = " low " > Low </ option >
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="languages">Programming Languages:</label>
<select id="languages" name="languages" multiple size="5"
aria-describedby="lang-help">
<option value="js">JavaScript</option>
<option value="py">Python</option>
<option value="java">Java</option>
<option value="cpp">C++</option>
<option value="ruby">Ruby</option>
</select>
<small id="lang-help">
Hold Ctrl (Windows) or Cmd (Mac) to select multiple languages
</small>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="category">
Category <span aria-label="required">*</span>
</label>
<select id="category" name="category" required aria-required="true">
<option value="">Select category</option>
<option value="tech">Technology</option>
<option value="health">Health</option>
<option value="finance">Finance</option>
</select>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="region">Region:</label>
<select id="region" name="region"
aria-invalid="true"
aria-describedby="region-error" required>
<option value="">Select region</option>
<option value="north">North</option>
<option value="south">South</option>
</select>
<div id="region-error" role="alert" style="color: red;">
Please select a region
</div>
</form>
Select elements are fully keyboard accessible:
Tab : Focus the selectSpace/Enter : Open dropdownArrow keys : Navigate optionsEscape : Close dropdownType : Jump to option starting with letter
Browser Version Notes Chrome 1+ Full support Firefox 1+ Full support Safari 1+ Full support Edge 12+ Full support IE 3+ Full support
The <select> element has been supported since the earliest browsers.
