HTML option Tag selected Attribute Tutorial

In this section, we will learn what the selected attribute is and how to use it.

What is selected Attribute in HTML <option> Tag?

Consider an HTML <select> element which we can use to create a dropdown selection list; typically, we need users to pick an item from the list and submit it to a server. But sometimes we have a default option in mind and want that item to be submitted in case users didn’t pick an option from the list.

This is where we can use the `selected` attribute!

Simply put, this attribute in any <option> element and that becomes the pre-selected option for the list. This means the target option is the default value to be submitted to a server if users don’t change the option and pick another one.

HTML selected Attribute in <option> Tag Syntax:

<option selected> </option>

<option> Tag selected Attribute Values

The selected attribute is a boolean one and that means we only need to put this attribute in the opening tag of the <option> element. After that, the option becomes pre-selected.

Example: using selected attribute in HTML <option> tag

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

Here the pre-selected option is red and so if users don’t pick another option, it’s the Red option that will be sent to a server then.

Facebook
Twitter
Pinterest
LinkedIn

Top Technologies