HTML <option> Tag

The <option> tag in HTML is used to define an option within a <select>, <datalist>, or <optgroup> element. These options represent the selectable items in a dropdown list, a datalist suggestion, or part of an option group respectively. Essentially, each <option> tag defines a single choice available to the user.

Syntax

<option value="value" label="text" selected disabled>
  Option Text
</option>

Attributes

Example

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

This basic example demonstrates a simple dropdown with three options: Apple, Banana, and Cherry. The value attribute specifies what data will be submitted when that option is selected.

More Examples

Using selected Attribute

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

In this example, "Banana" is pre-selected when the page loads due to the selected attribute.

Using disabled Attribute

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

Here, "Banana" is disabled and cannot be selected. It is grayed out in the dropdown.

Using label Attribute

<select>
  <option value="apple">Apple</option>
  <option value="banana" label="Bana">A Very Long Banana Option Here</option>
  <option value="cherry">Cherry</option>
</select>

When label attribute used, the option shows the label text, but the value will be the text inside option tag ("A Very Long Banana Option Here").

Options inside optgroup

<select>
  <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 example shows how <option> tags are nested inside <optgroup> tags to categorize options. This enhances user experience by grouping similar options together.

Options in a datalist

<label for="browser-input">Choose a browser:</label>
<input list="browsers" id="browser-input" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

This demonstrates how option tags work in a datalist, that provides auto suggestions. As user starts to type, the matching options appear as suggestions.

Option value is different from text.

<select>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

This demonstrates value attribute can have a non-textual value that will be sent to the server. The option text will be shown to the user.

Browser Support

The <option> tag is supported by all modern browsers, including:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• Always include the value attribute in your <option> tags to ensure the correct data is sent to the server. If not, the text inside the option tag is taken as the value.
• Use the selected attribute to highlight a default choice.
• The disabled attribute can be used to prevent invalid selections or to indicate unavailable options.
• Use <optgroup> to organize options into logical groups for better usability.
• While the <label> attribute offers flexibility for displaying text different from value, the value attribute should be semantically meaningful.
• The <option> tag must be nested within a <select> or <datalist> element to function correctly.
• When working with form submissions, ensure that you handle the submitted values effectively on your server-side code.