Skip to main content

Select, Option, and Optgroup Elements (Live Playground)

In this tutorial, we will explore the select, option, and optgroup elements in HTML forms. These elements help you create dropdown lists and organize the options in a user-friendly manner.

Select Element​

The select element is used to create a dropdown list. Users can choose one option from the list, and the selected value can be submitted with the form.

HTML
<label for="fruit">Choose a fruit:</label>
<select id="fruit" name="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

Option Element​

The option element is used inside a select element to define the individual options available in the dropdown list. The value attribute of the option element is the value that will be sent to the server when the form is submitted.

HTML
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>

Optgroup Element​

The optgroup element is used to group options together in a dropdown list, making it easier for users to navigate through the options.

HTML
<label for="car">Choose a car:</label>
<select id="car" name="car">
  <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>
</select>

In the example above, we have used the optgroup element to group cars by their country of origin.

Additional Attributes​

Selected​

The selected attribute is used to pre-select an option when the page loads.

HTML
<option value="apple" selected>Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>

In this example, the "Apple" option will be pre-selected when the page loads.

Disabled​

The disabled attribute can be used to disable an option, making it unselectable.

HTML
<option value="apple">Apple</option>
<option value="banana" disabled>Banana</option>
<option value="cherry">Cherry</option>

In this example, the "Banana" option is disabled and cannot be selected by the user.

Live Playground, Try it Yourself

Conclusion​

In this tutorial, we have explored the select, option, and optgroup elements in HTML forms. By understanding these elements and their attributes, you can create more organized and user-friendly dropdown lists in your forms.