HTML Select Tag: How Combo Box & Option Work with Examples

HTML select tag and option tags let users pick values in a form. You use them to create dropdowns. The main keyword here is “HTML select and option.”

What Are the <select> and <option> Tags?

The HTML select tag creates a drop-down list in a form. It holds many <option> tags. Each <option> defines a single choice in that list.

You use <select> to wrap your options. The browser shows the list. The <option> tag provides the choices. When you submit the form, the value of the selected option goes to the server.

Here is the basic syntax:

<select name="fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>

The <select> element defines the dropdown. The name attribute sets the key for form data. Each <option> has a value sent with the form. The text inside <option> is what the user sees.

You can set one option as selected by default. Use the selected attribute on an option:

<select name="fruits">
  <option value="apple" selected>Apple</option>
  <option value="banana">Banana</option>
</select>

The browser shows “Apple” as the default choice when the page loads.

You use HTML select and option tags in forms to let users choose one or more items from a list. This helps keep forms short and user-friendly when there are many possible choices.

You can make options unselectable with the disabled attribute:

<select name="fruits">
  <option value="apple">Apple</option>
  <option value="banana" disabled>Banana (Unavailable)</option>
</select>

“Banana” shows in the list but users cannot choose it. This is useful to show items that are not available.

Group Options with <optgroup>

The <optgroup> tag groups related options in a dropdown. This helps organize large lists.

You define a label for the group. All options inside belong to that group. Browsers show the label as a heading.

Here is the syntax:

<select name="cars">
  <optgroup label="German Cars">
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
  </optgroup>
  <optgroup label="Japanese Cars">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
</select>

The <optgroup> element uses the label attribute. Options inside it appear grouped under that label.

Here is an example:

<select name="food">
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="broccoli">Broccoli</option>
  </optgroup>
</select>

This groups fruits and vegetables to make it easy for users to find items.

Here is another example:

<select name="country">
  <optgroup label="Europe">
    <option value="france">France</option>
    <option value="germany">Germany</option>
  </optgroup>
  <optgroup label="Asia">
    <option value="japan">Japan</option>
    <option value="china">China</option>
  </optgroup>
</select>

This separates countries by continent. It improves usability for long lists.

The multiple Attribute

You use the multiple attribute to let users select more than one option. The browser shows a list box instead of a single dropdown.

When you add multiple, users can hold down Ctrl (Windows) or Command (Mac) to select more items.

Here is the syntax:

<select name="colors" multiple>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

The form submits all selected values.

Here is an example for selecting skills:

<select name="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

Users can choose all skills they know.

Here is another example for choosing interests:

<select name="interests" multiple>
  <option value="music">Music</option>
  <option value="sports">Sports</option>
  <option value="reading">Reading</option>
  <option value="travel">Travel</option>
</select>

This lets users pick many interests to describe themselves.

How to Style Select Tag Menus with CSS

You can customize the look of select menus with CSS. Here are a few ways.

Change Width and Font

<style>
  select {
    width: 200px;
    font-size: 16px;
  }
</style>

Add Background and Border

<style>
  select {
    background-color: #f0f0f0;
    border: 2px solid #333;
    padding: 5px;
  }
</style>

This gives a light background, strong border, and spacing to make it look modern.

Custom Arrow with Appearance

<style>
  select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url('arrow.png') no-repeat right;
    padding-right: 30px;
  }
</style>

This removes the default arrow and adds a custom one on the right.

Examples of HTML Select Tag

Simple Dropdown

<select>
  <option>Yes</option>
  <option>No</option>
</select>

A basic yes/no choice.

Dropdown with Values

<select name="gender">
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>

Stores value data with the form.

Default Selected Option

<select name="language">
  <option value="en" selected>English</option>
  <option value="fr">French</option>
</select>

English shows first when the page loads.

Disabled Option

<select name="plan">
  <option value="free">Free</option>
  <option value="premium" disabled>Premium (Unavailable)</option>
</select>

Premium is not selectable.

Grouped Options

<select name="cars">
  <optgroup label="Electric">
    <option value="tesla">Tesla</option>
    <option value="nissan">Nissan Leaf</option>
  </optgroup>
  <optgroup label="Gasoline">
    <option value="ford">Ford Mustang</option>
    <option value="chevy">Chevy Camaro</option>
  </optgroup>
</select>

Shows clear categories

Multiple Selection

<select name="hobbies" multiple>
  <option value="gaming">Gaming</option>
  <option value="cooking">Cooking</option>
  <option value="hiking">Hiking</option>
</select>

Users can pick many hobbies.

Wrapping Up

In this article, you learned what the HTML select and option tags do and how to use them. You also saw how to group options, use multiple selections, and style your menus.

Here is a quick recap:

• <select> holds the dropdown list.
• <option> provides the choices.
• You can set a default option with selected.
• Disable options with disabled.
• Group items with <optgroup>.
• Let users pick many options with multiple.
• Style menus with CSS for better design.

FAQs

Similar Reads