HTML option Tag Tutorial

In this section, we will learn what the HTML <option> element is and how to use it.

What is <option> Tag in HTML?

The <option> element is used to create an option for a selection list.

Basically, HTML elements like <select>, <datalist>, and <optgroup> take a list of items within their body and these items are used for different purposes. For example, for the HTML <select> element, these items will be shown to users and they can pick an option from the list, etc.

We use the <option> tag to create the items for those mentioned HTML elements.

HTML <option> Tag Syntax:

<option value = “value”> value </option>

HTML <option> Tag Values

The value we set within the opening and closing tag of <option> element is the value that will be shown to users and they decide based on this value to whether select that option.

Also, there’s an attribute named `value` and here we set a value that should be sent to a server if users select that option. So basically, the value in the `value` attribute is the one for a server and users won’t see it.

Example: using <option> tag in HTML

See the Pen using <option> tag in HTML by Omid Dehghan (@odehghan) on CodePen.

Here we have a selection list and as you can see, the items of this list are created via a bunch of <option> elements.

Within the opening and closing tags of <option> element, we have values and these are shown to users to see and pick an option based on them.

Also, note that each option has the `value` attribute. The value in this attribute is the one that will be sent to a server if users picked an option from the list.

HTML <option> Tag Attributes

Name

Description

disabled

Using this attribute, we can disable the target option so that users can’t select that option anymore.

label

This attribute is used to set a short label for the target option. This is the value that users see instead of the actual content within the opening and closing tags of an <option> element.

selected

This attribute is used to pre-select an option from a list.

value

This attribute is used to set the value that should be sent to a server if that option is selected.

Facebook
Twitter
Pinterest
LinkedIn

Top Technologies