HTML - <option> Tag

Quiz

Introduction to <option> Tag

The HTML <option> tag is used to define the individual options within a <select> dropdown list. It allows the users to choose from a predefined set of values, making it an essential element for creating user friendly forms.

The <option> tag accepts the value attribute, which represents the actual data submitted to the server when a form is submitted. It is always nested inside the <select> element and can be manipulated by JavaScript.

Syntax

Following is the syntax of HTML <option> tag −

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

Attributes

HTML option tag supports Global and Event attributes of HTML. It also accepts 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.

Example : Basic Usage

Let's look at the following example, where we are going to consider the basic usage of 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>
</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>

Example : Preselected Option

Consider the following example, where we are going to make the option preselected when the dropdown loads by using the selected attribute.

<!DOCTYPE html>
<html>
<body>
<select>
  <option value="x">JAVA</option>
  <option value="y" selected>HTML</option>
  <option value="z">C++</option>
</select>
</body>
</html>

Example : Using disabled Attribute

In the following example, we are going to use the <option> tag along with the disabled attribute.

<!DOCTYPE html>
<html>
    <style>
        body{
            text-align:center;
        }
        select{
             font-family:verdana;
            color:green;
        }
    </style>
<body>
<select>
  <option value="select" disabled>MECHANIC</option>
  <option value="car">SOFTWARE</option>
  <option value="bike">HARDWARE</option>
</select>
</body>
</html>

Example : Using with Optgroup Element

Following is the example, where we are going to use the <option> tag along with the optgroup element.

<!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>

Supported Browsers

Tag
option	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page