HTML - <option> Tag

The <option> tag defines either the elements 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 list 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

Following is the syntax for HTML <option> tag −

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

Specific Attributes

The HTML <output > tag also supports the following additional attributes −

S.No. Attribute & Description
1

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.
2

label

Defines a label to use when using <optgroup>.
3

selected

Defines the default option to be selected when page loads.
4

value

Specifies the value of the option to be sent to the server.

Example

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>

When we run the above code, it will generate an output consisting of the dropdown menu displayed on the webpage.

Example

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>

On running the above code, the output window will pop up displaying the option tag used in the datalist element on the webpage.

Example

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>

When we run the above code, it will generate an output consisting of the dropdown menu displayed on the webpage.

Example

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>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <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>

On running the above code, the output window will pop up displaying the dropdown menu applied with CSS and used with a disabled attribute on the webpage.

html_tags_reference.htm
Advertisements