HTML Option

by

HTML option elements define the choices available inside a dropdown list or a list-style selection control. They are commonly used in registration forms, surveys, booking systems, and online applications. The <option> element works inside a <select>, <optgroup>, or <datalist> element.

What Is an HTML Option Element?

The HTML <option> element represents one selectable choice in a list. Users can choose an option from a dropdown or another supported selection interface.

For example, a course registration form may display Java, Python, SQL, and Web Development as selectable options.

To understand how options work inside dropdowns, explore HTML Select and HTML Form Elements.

HTML Option Example

The following example demonstrates how to use option elements inside a 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="sql">SQL</option>
    <option value="web-development">Web Development</option>
  </select>

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

In this example:

  • <select> creates the dropdown list.
  • <option> defines each available choice.
  • value specifies the value submitted with the form.
  • The text between the opening and closing option tags is displayed to the user.

For example, when a user selects Java, the submitted field value is java.

Important Attributes of HTML Option

The <option> element supports several useful attributes.

  • value specifies the value submitted with the form.
  • selected marks an option as selected initially.
  • disabled prevents users from selecting an option.
  • label provides an alternative label for the option.

Here is an example using these attributes:

<select name="country" id="country">
  <option value="">Choose a country</option>
  <option value="india" selected>India</option>
  <option value="usa">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="other" disabled>Other countries unavailable</option>
</select>

In this example, India is selected by default. The final option is disabled and cannot be selected.

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

Using a Placeholder Option

A placeholder option helps users understand what they need to select. A common approach is to provide an initial option with an empty value.

<label for="city">Select Your City:</label>

<select id="city" name="city" required>
  <option value="" selected disabled>Choose a city</option>
  <option value="hyderabad">Hyderabad</option>
  <option value="vijayawada">Vijayawada</option>
  <option value="visakhapatnam">Visakhapatnam</option>
</select>

The first option displays the instruction but cannot be selected again after the user chooses another option. Because its value is empty, the required attribute requires a valid selection before normal form submission.

Grouping Options with Optgroup

The <optgroup> element organizes related options under a shared label. This is helpful when a dropdown contains many choices.

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

<select id="course" name="course">
  <optgroup label="Programming">
    <option value="java">Java</option>
    <option value="python">Python</option>
  </optgroup>

  <optgroup label="Web Development">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
  </optgroup>
</select>

The options are separated into Programming and Web Development groups, making the list easier to navigate.

HTML Option vs Datalist Option

An option inside a <select> creates a choice in a dropdown or selection list. An option inside a <datalist> provides a suggestion for a text input, while users may generally enter their own value as well.

Explore HTML Datalist to learn how suggested values work with text fields.

Frequently Asked Questions

Can an option be selected by default?

Yes. Add the selected attribute to the option you want selected initially.

Can I disable an option?

Yes. Add the disabled attribute to prevent users from selecting it.

Is the value attribute required?

It is optional, but recommended. If omitted, the option’s text content is generally used as its value.

Can I use option elements without a select element?

Yes. Option elements can also be used inside <optgroup> or <datalist>, but they must appear within an appropriate parent element.