HTML Select Drop-Down List

The HTML <select> element creates a drop-down list or list box. Use <option> elements for the available choices.

<label for="colour">Favourite colour</label>
<select id="colour" name="colour">
  <option value="">Select a colour</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

Basic Select Syntax Top ↑

<select name="colours">
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

The visible text inside each <option> is what the user sees. The value is what the browser submits when that option is selected.

Select Attributes Top ↑

Option Attributes Top ↑

Placeholder / Prompt Option Top ↑

A common pattern is to include an initial prompt option with an empty value:

<label for="colour2">Favourite colour</label>
<select id="colour2" name="colour" required>
  <option value="" selected disabled>Select a colour</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

Default Selection with selected Top ↑

Use the Boolean selected attribute to choose the initial option:

<select name="colour">
  <option value="blue">Blue</option>
  <option value="green" selected>Green</option>
  <option value="red">Red</option>
</select>

With a normal single-select control, one option is selected at a time.

Control Select Width with CSS Top ↑

The old page used a non-standard width attribute on <select>. Use CSS instead.

<select name="colour" style="width: 350px;">
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

For reusable layouts, place the width rule in a stylesheet instead of repeating an inline style.

Multiple Selection Top ↑

Add the Boolean multiple attribute to allow more than one option to be selected.

<label for="colours_multi">Choose colours</label>
<select id="colours_multi" name="colours[]" size="4" multiple>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="red">Red</option>
  <option value="yellow">Yellow</option>
  <option value="white">White</option>
</select>

For PHP, the array-style name colours[] makes the selected values available as an array.

Handling multiple select values using PHP →

size Attribute Top ↑

The size attribute sets how many options are visible without scrolling.

<select name="colour" size="4">
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="red">Red</option>
  <option value="yellow">Yellow</option>
</select>

A size greater than 1 generally displays the control as a list box instead of a compact one-line drop-down.

Group Options with optgroup Top ↑

Use <optgroup> when a long select list contains meaningful groups.

<select name="vehicle">
  <optgroup label="Cars">
    <option value="sedan">Sedan</option>
    <option value="suv">SUV</option>
  </optgroup>

  <optgroup label="Two wheelers">
    <option value="bike">Bike</option>
  </optgroup>
</select>

See OPTGROUP for grouping select options.

Disabled Select and Options Top ↑

Disable the complete select Top ↑

<select name="plan" disabled>
  <option value="basic">Basic</option>
  <option value="pro">Pro</option>
</select>

A disabled select is normally excluded from form submission.

Disable one option Top ↑

<select name="plan">
  <option value="basic">Basic</option>
  <option value="enterprise" disabled>Enterprise</option>
</select>

autofocus Top ↑

<select name="country" autofocus>
  <option value="in">India</option>
  <option value="us">United States</option>
</select>

Use autofocus selectively because moving focus automatically can be disruptive for some users.

Complete Form Example Top ↑

<form action="save.php" method="post">
  <label for="country2">Country</label>

  <select id="country2" name="country" required>
    <option value="">Select a country</option>
    <option value="in">India</option>
    <option value="us">United States</option>
  </select>

  <button type="submit">Submit</button>
</form>

Browser validation can require a selection, but the receiving application must still validate the submitted value.

Receiving Select Values in PHP Top ↑

Single select Top ↑

<?php
$allowed=[
    'blue',
    'green',
    'red'
];

$colour=$_POST['colour'] ?? null;

if($colour === null || !in_array($colour, $allowed, true)){
    echo 'Select a valid colour.';
}

Multiple select Top ↑

<?php
$allowed=[
    'blue',
    'green',
    'red',
    'yellow',
    'white'
];

$colours=$_POST['colours'] ?? [];

if(!is_array($colours)){
    $colours=[];
}

$colours=array_values(
    array_intersect($colours, $allowed)
);

See handling multiple select values in PHP.

JavaScript and jQuery Examples Top ↑

Video Tutorial Top ↑

Common Select Mistakes Top ↑

Using a non-standard width attribute Top ↑

Use CSS to control select width.

Assuming the visible text is always the submitted value Top ↑

When an option has a value attribute, that value is submitted rather than the visible label.

Forgetting that multiple needs multiple-value handling Top ↑

When several options can be selected, the server must be prepared to receive several values. In PHP, names such as colours[] are convenient.

Using Ctrl as the only accessibility instruction Top ↑

Keyboard and touch interactions vary by platform. Describe the task, not only one desktop key combination.

Using a prompt option as real data Top ↑

Use an empty value for prompts such as "Select a colour" and validate the submitted choice.

Assuming disabled values are submitted Top ↑

Disabled controls and disabled options are normally unavailable for normal submission.

Trusting browser validation alone Top ↑

Validate select values again on the server, preferably against an allowlist of accepted values.

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: