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 |
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. |
This attribute is used to pre-select an option from a list. | |
This attribute is used to set the value that should be sent to a server if that option is selected. |