Open In App

HTML <option> Tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The <option> tag in HTML is used to choose an option from a Drop-Down menu. This tag can be used with or without any attributes and the needed value can be sent to the server. The <option> tag is used within a <select> element to create a selectable option in a dropdown list.

This elements must be inside <select> tag, <optgroup>, or <datalist> tags. It represents an individual option within a <select> dropdown, allowing users to choose among multiple choices.

Each <option> tag can include text or numeric values, which will be presented to the user. The <option> tag also supports the Global Attributes and Event Attributes in HTML.

Syntax: 

<option> Contents... </option>

Attributes:

Attribute Values

Description

disabled

This attribute contains the value disabled which represents the option is disabled.

label

This attribute contains the text value which represents the shorted label for the option.

selected

This attribute contains the value selected which represents the item that is pre-selected when the browser loaded.

value

This attribute contains the value text sent to the server.

Example 1: In this example ,we will see the use of “option” tag in HTML .

HTML




<!DOCTYPE html>
<html>
 
<body>
  <h1>GeeksforGeeks</h1>
  <h2>HTML option Tag</h2>
  <select>
    <!-- option tag starts -->
    <option>Choose an option</option>
    <option value="html">HTML</option>
    <option value="java">JAVA</option>
    <option value="C++">C++</option>
    <option value="php">PHP</option>
    <option value="perl">PERL</option>
    <!-- option tag ends -->
  </select>
</body>
 
</html>


Output: 

Example 2:  In this example ,we will see the use of “option” tag in HTML .

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Optgroup Example</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
 
    <h1 style="color: green;">
      GeeksforGeeks
      </h1>
 
    <form>
        <label for="dropdown">
          Select an option:
          </label>
        <select id="dropdown" name="dropdown">
            <optgroup label="Group 1">
                <option value="option1">
                  Option 1
                  </option>
                <option value="option2">
                  Option 2
                  </option>
            </optgroup>
            <optgroup label="Group 2">
                <option value="option3">
                  Option 3
                  </option>
                <option value="option4">
                  Option 4
                  </option>
            </optgroup>
        </select>
    </form>
 
</body>
 
</html>


Output: 

htf

Supported Browsers: 

  • Google Chrome 1
  • Edge 12
  • Firefox 1
  • Opera 15
  • Safari 4


Last Updated : 26 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads