HTML select Tag Tutorial

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

Drop Down in HTML: What is <select> Tag in HTML?

HTML <select> element is used in an HTML document to create drop-down lists.

This element is mainly used in forms where users can select an item from the dropdown list and that will be submitted to a server along with the other form data after users hit a submit button.

In order to create items for a dropdown list, we use HTML <option> element.

Each HTML <option> element in the body of a <select> element represents one item on the final dropdown list.

The <select> element has an attribute called `name` which is used to set a name for the target dropdown list. It is important to set a value for this name attribute, otherwise, no-data from the dropdown list will be submitted to a server.

HTML <select> Tag Syntax:

<select name = “name”>

<option> … </option>

<option> …</option>

</select>

HTML <select> Tag Values

HTML <select> element takes items for its list. These items are created via HTML <option> element.

So basically, in the body of an HTML <select> element, we can put one or more <option> elements as the items of that dropdown list.

Example: HTML for dropdown list

See the Pen HTML for dropdown list by Omid Dehghan (@odehghan) on CodePen.

Example: drop down menu in HTML

See the Pen drop down menu in HTML by Omid Dehghan (@odehghan) on CodePen.

For this particular example, we’ve applied the `disabled` attribute on the <select> element and, as a result, you can’t select an item from the list anymore.

HTML <select> Tag Attributes

These are the attributes of the <select> element:

Name

Description

autofocus

This attribute specifies that the target dropdown list should have the focus when the HTML document is loaded on a browser window or tab.

disabled

This attribute will disable the target dropdown list and so users can’t pick an item from that list anymore.

form

This attribute specifies what <form> element the dropdown list belongs to.

multiple

Using this attribute, we can allow users to select multiple items from the drop down list.

name

This attribute is used to set a name for the target dropdown list.

required

This attribute specifies that it is required for users to select an item from the dropdown list.

size

This attribute specifies the number of visible items on the target dropdown list.

Facebook
Twitter
Pinterest
LinkedIn

Top Technologies