HTML Select - Web4learners

HTML select elements allow users to choose an option from a dropdown list. They are commonly used in registration forms, checkout pages, surveys, booking systems, and settings menus. The <select> element creates the dropdown, while the <option> element defines the available choices.

What Is an HTML Select Element?

An HTML select element is a form control that displays a list of options users can choose from. By default, it allows users to select one option at a time.

For example, a registration form can use a dropdown to let users select their country, state, city, or preferred course.

To understand how dropdowns fit into forms, explore HTML Forms and HTML Form Elements.

HTML Select Example

The following example demonstrates how to create a simple dropdown list.

<form>
  <label for="course">Choose Your Course:</label>

  <select id="course" name="course">
    <option value="java">Java</option>
    <option value="python">Python</option>
    <option value="web-development">Web Development</option>
    <option value="data-analytics">Data Analytics</option>
  </select>

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

In this example:

<select> creates the dropdown list.
id="course" identifies the dropdown.
name="course" defines the field name submitted with the form.
<option> defines each available choice.
value specifies the value submitted when an option is selected.

The browser displays the available courses in a dropdown menu.

Important Attributes of HTML Select

The <select> element supports several useful attributes.

name identifies the field in submitted form data.
id uniquely identifies the dropdown.
required requires the user to select a valid option before normal form submission.
multiple allows users to select multiple options.
disabled prevents users from interacting with the dropdown.
size specifies how many options are visible at once in a list-style control.

For example, you can make a course selection mandatory:

<label for="course">Select a Course:</label>

<select id="course" name="course" required>
  <option value="">Choose a course</option>
  <option value="java">Java</option>
  <option value="python">Python</option>
  <option value="sql">SQL</option>
</select>

The empty first option acts as a prompt. Because its value is empty, the required attribute prevents a normal submission until the user chooses a course.

Learn more about HTML Form Attributes and the HTML Required Attribute.

Selecting a Default Option

You can use the selected attribute to choose an option by default.

<label for="country">Choose Your Country:</label>

<select id="country" name="country">
  <option value="india" selected>India</option>
  <option value="usa">United States</option>
  <option value="uk">United Kingdom</option>
</select>

In this example, India appears as the initially selected option.

Allowing Multiple Selections

The multiple attribute allows users to select more than one option.

<label for="skills">Select Your Skills:</label>

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

The interface for selecting multiple options depends on the browser and device. Users may need to hold a modifier key on desktop or use a different selection interaction on mobile.

Styling HTML Select with CSS

CSS can improve the appearance of dropdown menus.

<style>
  select {
    width: 100%;
    max-width: 350px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    background-color: white;
  }

  select:focus {
    outline: 2px solid #cce5ff;
    border-color: #007bff;
  }
</style>

This example sets the dropdown’s width, padding, border, and focus style. The exact appearance of native dropdown controls can vary across browsers.

HTML Select vs Radio Buttons

A select element presents choices inside a dropdown, which can save space when many options are available. Radio buttons display options directly and are useful when users need to compare a small number of choices.

For a few visible choices, consider HTML Radio Buttons. For a long list of options, a dropdown is often more compact.

Frequently Asked Questions

Can an HTML select element allow multiple selections?

Yes. Add the multiple attribute to allow users to select more than one option.

How do I make a dropdown mandatory?

Add the required attribute and include an initial prompt option with an empty value.

What is the difference between select and option?

The <select> element creates the dropdown control, while each <option> element defines a choice within it.

Can I change the appearance of a dropdown?

Yes. CSS can style properties such as width, padding, borders, and focus states. Some native dropdown details remain browser-dependent.