totn HTML

HTML: <option> tag

This HTML tutorial explains how to use the HTML element called the <option> tag with syntax and examples.

Description

The HTML <option> tag creates an item in a <select>, <datalist> or <optgroup> tag. The item defined by the <option> tag will appear as one of the values in a list of values. This tag is also commonly referred to as the <option> element.

Syntax

In HTML, the syntax for the <option> tag is:

<body>
  <label for="tutorial_choice">Tutorials: </label>

  <select id="tutorial_choice">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="sql">SQL</option>
  </select>
</body>

Sample Output

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <option> tag:

Attribute Description HTML Compatibility
disabled Boolean value indicating that the user cannot interact with the option. HTML 4.01, HTML5
label The label that describes in the option in the dropdown list. If the label is not provided, the value attribute will be used instead. HTML 4.01, HTML5
selected Boolean value indicating whether this option is initially selected. By default, only one option can have the selected attribute. However, if the multiple attribute is set on the <select> tag, then more than one <option> can have the selected attribute. HTML 4.01, HTML5
value The value sent when the form is submitted if the option has been selected in the dropdown list. HTML 4.01, HTML5

Note

Browser Compatibility

The <select> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <select> tag below, exploring examples of how to use the <select> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <select> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
  <label for="tutorial_choice">Tutorials: </label>

  <select id="tutorial_choice">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="sql">SQL</option>
  </select>
</body>

</html>

In this HTML5 Document example, we have used the <select> tag to create a list of three dropdown values - HTML, CSS and SQL. These values will appear as a drop down list for the user to select from.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <select> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
  <label for="tutorial_choice">Tutorials: </label>

  <select id="tutorial_choice">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="sql">SQL</option>
  </select>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have used the <select> tag to create a list of three dropdown values - HTML, CSS and SQL. These values will appear as a drop down list for the user to select from.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <select> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
  <label for="tutorial_choice">Tutorials: </label>

  <select id="tutorial_choice">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="sql">SQL</option>
  </select>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have used the <select> tag to create a list of three dropdown values - HTML, CSS and SQL. These values will appear as a drop down list for the user to select from.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <select> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<div>
  <label for="tutorial_choice">Tutorials: </label>

  <select id="tutorial_choice">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="sql">SQL</option>
  </select>
</div>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have used the <select> tag to create a list of three dropdown values - HTML, CSS and SQL. These values will appear as a drop down list for the user to select from.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <select> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<div>
  <label for="tutorial_choice">Tutorials: </label>

  <select id="tutorial_choice">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="sql">SQL</option>
  </select>
</div>
</body>

</html>

In this XHTML 1.1 Document example, we have used the <select> tag to create a list of three dropdown values - HTML, CSS and SQL. These values will appear as a drop down list for the user to select from.

Share on: