❮ Previous Next ❯

HTML <option> tag

The <option> tag is used to define each option in a dropdown list. It is usually used within the <select>, <outgroup> and <datalist> elements.

Type: Not classified

Syntax of <option> tag

<select>

    <option>Option 1</option>
    <option>Option 2</option>

</select>

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Available fruit items</h2>

<select>

<optgroup label="Fruits list">
 <option value="" selected> --Select-- </option>
 <option value="apple">Apple</option>
 <option value="banana">Banana</option>
 <option value="orange">Orange</option>
</optgroup>

</select>

</body>
</html>
Run The code »

Output on the browser

Available fruit items

The <outgroup> element helps in long drop-down lists having many values such that related groups are placed within one <outgroup> element.

For a big hotel, you can make a drop-down lists of the items available such as:

Code for the above example

<select style="width:auto; display:block; margin:10px 10px;">

  <optgroup label="Potato products">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
  </optgroup>

  <optgroup label="Ginger products">
    <option value="d">D</option>
    <option value="e">E</option>
    <option value="f">F</option>
  </optgroup>

  <optgroup label="Wheat products">
    <option value="g">G</option>
    <option value="h">H</option>
    <option value="i">I</option>
  </optgroup>

  <optgroup label="Rice products">
    <option value="j">J</option>
    <option value="k">K</option>
    <option value="l">L</option>
  </optgroup>

</select>


<select style="width:auto; display:block; margin:10px 10px;">
  <option value="">Number of Quantities</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>


<button type="submit" style="margin-left:10px; background-color:#0aa06e; color:#ffffff; padding:10px 20px; border-radius:6px;">
  Click here to order
</button>

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<option> Yes Yes Yes Yes Yes

Attributes of <option> tag

Attribute Value Note
disabled disabled It makes the <option> value disabled (usuable or unclickable).
label text It defines an alternative display text for the <option> element.
selected selected It defines a default selected option from the drop-down lists.
value text It defines the value send to the server when a item or list is selected.

Here, disabled and selected attributes are boolean attributes. It does not need its value, its presence only defines its function.

Example of using all of the four attributes


<select>

  <optgroup label="Fruits">
    <option selected>--select--</option>
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="banana">Banana</option>
  </optgroup>

  <optgroup label="Vegetables">
    <option disabled>Cabbage</option>
    <option value="pea" label="pea">Pea</option>
    <option value="pea" label="lettuce">Lettuce</option>
  </optgroup>
  
 </select>

Output

selected attribute makes default selected value from the drop down list.
disabled attribute makes unclickable. It is mainly used when the item is out of stock or not longer available.
value attribute defines the value to be sent to the server when selected. It has be to used with <button> element.
lable attribute defines an alternative text when the corresponding option is not showing. (Rarely used)

More reference

You know that <option> element is used to make option value in a drop-down lists. But to define many options in a group related category, use <outgorup> element. Generally, it is defined either with the <select> or <datalist> element.

❮ Previous Next ❯