HTML - <option> Tag

HTML <option> tag is used to define the item of the data list for autocomplete, specified by the <datalist> tag, or the items of a drop-down list, defined by the <select> tag.

The <select> tag, <datalist> tag, or <optgroup> tag, which organizes the items, can employ the <option> tag as a child element. If the data lists need to be delivered to the server or if scripts need to access the data lists, the <option> tag is added to the <form> tag.

Syntax

<option>.......</option>

Attribute

HTML option tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.

Attribute	Value	Description
disabled	disabled	Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.
label	text	Defines a label to use when using <optgroup>.
selected	selected	Defines the default option to be selected when page loads.
value	text	Specifies the value of the option to be sent to the server.

Examples of HTML option Tag

Bellow examples will illustrate the usage of option tag. Where, when and how to use it to create options and how we can style that options using CSS.

Creating Option Items using option Tag

In the following program, we are using the HTML <option> tag to define the item contained in a "select" element in an HTML.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML option tag</title>
</head>
<body>
   <!--create an option tag-->
   <select name="" id="">
      <option value="">Choose your option</option>
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="javascript">JavaScript</option>
   </select>
</body>
</html>

Option item in Datalist

Following is another example of the HTML <option> tag. Here, we are using the "option" element(tag) to define an item contained in a "datalist" element in an HTML.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML option tag</title>
</head>
<body>
   <!--create an option tag-->
   <p>The "option" tag with the "datalist" element</p>
   <input type="text" list="colors">
   <datalist id="colors">
      <option value="red"></option>
      <option value="blue"></option>
      <option value="green"></option>
      <option value="yellow"></option>
   </datalist>
</body>
</html>

Option item in Optgroup

In this program, we are creating an HTML <option> tag to define an item contained in an "outgroup" element in an HTML.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML option tag</title>
</head>
<body>
   <!--create an option tag-->
   <p>The "option" tag with "select" and "optgroup" element</p>
   <select>
      <optgroup label="Colors">
         <option value='red'>Red</option>
         <option value="green">Green</option>
         <option value="yellow">Yellow</option>
         <option value="blue">Blue</option>
      </optgroup>
      <optgroup label="Fruits">
         <option value="apple">Apple</option>
         <option value="banana">Banana</option>
         <option value="orange">Orange</option>
         <option value="grapes">Grapes</option>
      </optgroup>
   </select>
</body>
</html>

Disable Option Item

In this example, we are creating an HTML <option> tag to define an item contained in a "select" element. Then, we are using the "disabled" attribute to disable the option. Using CSS, we are styling the option tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML option tag</title>
   <style>
      select {
         width: 200px;
      }

      option {
         background-color: rgb(141, 141, 141);
         color: blue;
      }
   </style>
</head>
<body>
   <!-- create an option tag-->
   <p>The "option" tag with "select" element</p>
   <select>
      <option value='red' disabled>Red</option>
      <option value="green">Green</option>
      <option value="yellow">Yellow</option>
      <option value="blue">Blue</option>
   </select>
</body>
</html>

Supported Browsers

Tag
option	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm