HTML: <option> tag
In this series of learning HTML, we will teach you how to use the HTML option tag with proper syntax and lots of examples. Let’s start on the HTML option tag.
Description of HTML option tag
The HTML <option> tag is used to define an option in a dropdown list or a list box created using the <select> tag. The <option> tag must be used within the <select> element to specify the choices available to the user.
Here is an example of how the <option> tag can be used:
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
In this example, the <option> tag creates three options within a <select> element. The value attribute specifies the value of each option, which can be used to identify the selected option on the server side. The text between the opening and closing <option> tags specifies the text that is displayed to the user.
The <option> tag supports several other attributes to control the appearance and behavior of the option, such as:
disabled attribute to disable the optionselected attribute to pre-select the optionlabel attribute to provide a description for the option.
Overall, the <option> tag is a useful tool for creating dropdown lists and list boxes in HTML forms, and should be used to provide a set of choices to the user.
Syntax of HTML option tag
The option tag is used within a select tag in HTML to define the options in a drop-down list. The syntax of the option tag is as follows:
<option value=”value_attribute”>Option text</option>
where:
value_attribute: Specifies the value associated with the option. This value is sent to the server if the form containing the select element is submitted.Option text: Specifies the text that appears in the drop-down list for the option.
Both value and Option text are mandatory attributes for the option tag. Here’s an example of using the option tag:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This will create a drop-down list with the options “Volvo”, “Saab”, “Mercedes”, and “Audi”. When the user selects one of the options, the value of that option will be sent to the server when the form is submitted.
Global Attributes
The option tag in HTML supports various global attributes that can be used to add additional functionality and attributes to the element. These global attributes include:
accesskey: Specifies a shortcut key to activate/focus the element.class: Specifies one or more class names for the element, which can be used for CSS styling.contenteditable: Specifies whether the content of the element is editable or not.dir: Specifies the direction of the element’s text, either left-to-right or right-to-left.hidden: Specifies that the element should be hidden from view.id: Specifies a unique identifier for the element.lang: Specifies the language of the element’s content.style: Specifies inline CSS styles for the element.tabindex: Specifies the tab order of the element.title: Specifies extra information about the element, which is typically displayed as a tooltip.translate: Specifies whether the content of the element should be translated or not.
Here’s an example of using some of these attributes on an option tag:
<select>
<option value="volvo" class="car-option" hidden>Volvo</option>
<option value="saab" style="color: red;" lang="en">Saab</option>
<option value="mercedes" tabindex="2">Mercedes</option>
<option value="audi" contenteditable="true" translate="no">Audi</option>
</select>
In this example, the first option element is hidden and has a custom class name, the second option has a custom CSS style and a language specified, the third option has a custom tab order, and the fourth option has editable content and is not translated.
The option tag in HTML does not have any specific event attributes that are unique to it. However, since the option tag is typically used within a select tag, it can respond to various event attributes defined on the select tag itself.
Some of the common event attributes that can be used on the select tag include:
onchange: Fires when the value of the select element is changed.onclick: Fires when the select element is clicked.onmouseover: Fires when the mouse pointer is moved over the select element.onmouseout: Fires when the mouse pointer leaves the select element.
Here’s an example of using the onchange attribute on a select tag with option tags:
<select onchange="myFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<script>
function myFunction() {
alert("You selected a car!");
}
</script>
In this example, the myFunction function is called when the user selects an option from the drop-down list. When an option is selected, an alert box will pop up with the message “You selected a car!”.
Other Attributes
In addition to the global and event attributes, the option tag in HTML supports some specific attributes that are related to its behavior within a select element. These attributes include:
disabled: Specifies that the option should be disabled and cannot be selected.label: Specifies a label for the option that can be displayed instead of the option text.selected: Specifies that the option should be pre-selected when the select element is displayed.
Here’s an example of using these attributes on option tags:
<select>
<option value="">-- Select a car --</option>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes" disabled>Mercedes</option>
<option value="audi" selected>Audi</option>
</optgroup>
</select>
In this example, the first option tag is used as a default option and does not have a value or label associated with it. The optgroup tags are used to group related options together and display a label for each group. The disabled attribute is used to disable the “Mercedes” option, so it cannot be selected. The selected attribute is used to pre-select the “Audi” option when the select element is displayed.
Notes on HTML option tag
Here are some important notes to keep in mind when working with the option tag in HTML:
- The
option tag must always be used within a select tag.
- The
value attribute of the option tag is used to specify the value of the selected option, which is sent to the server when the form is submitted.
- The text content of the
option tag is what is displayed in the drop-down list, unless a label attribute is specified.
- The
disabled attribute can be used to disable an option so that it cannot be selected.
- The
selected attribute can be used to pre-select an option when the select element is displayed.
- The
optgroup tag can be used to group related options together and display a label for each group.
- The
option tag can support various global attributes such as class, id, and style, as well as event attributes such as onchange and onclick.
- When working with multiple
select elements on the same page, it is important to give each element a unique id attribute so that they can be properly identified and manipulated with JavaScript.
- The
option tag does not support any content inside the tag. All content should be specified using the value and/or label attributes.
- The
option tag is an important element for creating forms and providing users with a selection of choices.
Browser Compatibility
The HTML option tag has essential support with the following browsers:
- Chrome
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
- Firefox (Gecko)
- Android
- Firefox Mobile (Gecko)
- Edge Mobile
- Opera Mobile
- Safari Mobile
Examples of HTML option tag
We will discuss the <option> tag below, exploring examples of how to use the <option> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
We will discuss the HTML option tag below, with some examples of how to use the option tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.
HTML5 Document
Here is an example of using the option tag in an HTML5 document to create a drop-down list of countries:
<!DOCTYPE html>
<html>
<head>
<title>Country Selector</title>
</head>
<body>
<h1>Select Your Country</h1>
<form>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">-- Select a country --</option>
<option value="USA">United States</option>
<option value="UK">United Kingdom</option>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
<option value="New Zealand">New Zealand</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In this example, we first define an HTML5 document with a DOCTYPE declaration and an html tag that contains a head and body section.
In the head section, we include a title tag that sets the title of the document to “Country Selector”.
In the body section, we create a form element that contains a label tag and a select tag. The label tag has a for attribute that is set to “country”, which links it to the select tag using the id attribute. This creates a label for the drop-down list that says “Country:”. The select tag contains several option tags that define the different countries that the user can select from. The first option tag is a default option that is displayed when the page is loaded and has an empty value. The remaining option tags each have a value attribute that is set to a different country and display the country name as the text content of the tag.
Finally, we add an input tag with a type attribute of “submit” that creates a submit button for the form.
When the user selects a country from the drop-down list and clicks the “Submit” button, the form data is sent to the server with the name and value of the selected option in the country parameter.
HTML 4.01 Transitional Document
Here is an example of using the option tag in an HTML 4.01 Transitional document to create a drop-down list of colors:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Color Selector</title>
</head>
<body>
<h1>Select a Color</h1>
<form>
<label for="color">Color:</label>
<select id="color" name="color">
<option value="">-- Select a color --</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="purple">Purple</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In this example, we first define an HTML 4.01 Transitional document with a DOCTYPE declaration that points to the html4/loose.dtd file.
In the head section, we include a title tag that sets the title of the document to “Color Selector”.
In the body section, we create a form element that contains a label tag and a select tag. The label tag has a for attribute that is set to “color”, which links it to the select tag using the id attribute. This creates a label for the drop-down list that says “Color:”. The select tag contains several option tags that define the different colors that the user can select from. The first option tag is a default option that is displayed when the page is loaded and has an empty value. The remaining option tags each have a value attribute that is set to a different color and display the color name as the text content of the tag.
Finally, we add an input tag with a type attribute of “submit” that creates a submit button for the form.
When the user selects a color from the drop-down list and clicks the “Submit” button, the form data is sent to the server with the name and value of the selected option in the color parameter.
XHTML 1.0 Transitional Document
here is an example of using the option tag in an XHTML 1.0 Transitional document to create a drop-down list of fruits:
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Fruit Selector</title>
</head>
<body>
<h1>Select a Fruit</h1>
<form>
<label for="fruit">Fruit:</label>
<select id="fruit" name="fruit">
<option value="">-- Select a fruit --</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="kiwi">Kiwi</option>
<option value="grape">Grape</option>
</select>
<br/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
In this example, we first define an XHTML 1.0 Transitional document with an XML declaration that specifies the encoding as UTF-8 and a DOCTYPE declaration that points to the xhtml1-transitional.dtd file.
In the head section, we include a title tag that sets the title of the document to “Fruit Selector”.
In the body section, we create a form element that contains a label tag and a select tag. The label tag has a for attribute that is set to “fruit”, which links it to the select tag using the id attribute. This creates a label for the drop-down list that says “Fruit:”. The select tag contains several option tags that define the different fruits that the user can select from. The first option tag is a default option that is displayed when the page is loaded and has an empty value. The remaining option tags each have a value attribute that is set to a different fruit and display the fruit name as the text content of the tag.
Finally, we add an input tag with a type attribute of “submit” that creates a submit button for the form.
When the user selects a fruit from the drop-down list and clicks the “Submit” button, the form data is sent to the server with the name and value of the selected option in the fruit parameter.
XHTML 1.0 Strict Document
Here is an example of using the option tag in an XHTML 1.0 Strict document to create a drop-down list of colors:
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Color Selector</title>
</head>
<body>
<h1>Select a Color</h1>
<form>
<label for="color">Color:</label>
<select id="color" name="color">
<option value="">-- Select a color --</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<br/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
In this example, we define an XHTML 1.0 Strict document with an XML declaration that specifies the encoding as UTF-8 and a DOCTYPE declaration that points to the xhtml1-strict.dtd file.
In the head section, we include a title tag that sets the title of the document to “Color Selector”.
In the body section, we create a form element that contains a label tag and a select tag. The label tag has a for attribute that is set to “color”, which links it to the select tag using the id attribute. This creates a label for the drop-down list that says “Color:”. The select tag contains several option tags that define the different colors that the user can select from. The first option tag is a default option that is displayed when the page is loaded and has an empty value. The remaining option tags each have a value attribute that is set to a different color and display the color name as the text content of the tag.
Finally, we add an input tag with a type attribute of “submit” that creates a submit button for the form.
When the user selects a color from the drop-down list and clicks the “Submit” button, the form data is sent to the server with the name and value of the selected option in the color parameter.
XHTML 1.1 Document
Here is an example of using the option tag in an XHTML 1.1 document to create a drop-down list of fruits:
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Fruit Selector</title>
</head>
<body>
<h1>Select a Fruit</h1>
<form>
<label for="fruit">Fruit:</label>
<select id="fruit" name="fruit">
<option value="">-- Select a fruit --</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="strawberry">Strawberry</option>
</select>
<br/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
In this example, we define an XHTML 1.1 document with an XML declaration that specifies the encoding as UTF-8 and a DOCTYPE declaration that points to the xhtml11.dtd file.
In the head section, we include a title tag that sets the title of the document to “Fruit Selector”.
In the body section, we create a form element that contains a label tag and a select tag. The label tag has a for attribute that is set to “fruit”, which links it to the select tag using the id attribute. This creates a label for the drop-down list that says “Fruit:”. The select tag contains several option tags that define the different fruits that the user can select from. The first option tag is a default option that is displayed when the page is loaded and has an empty value. The remaining option tags each have a value attribute that is set to a different fruit and display the fruit name as the text content of the tag.
Finally, we add an input tag with a type attribute of “submit” that creates a submit button for the form.
When the user selects a fruit from the drop-down list and clicks the “Submit” button, the form data is sent to the server with the name and value of the selected option in the fruit parameter.
