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 |
This attribute specifies that the target dropdown list should have the focus when the HTML document is loaded on a browser window or tab. | |
This attribute will disable the target dropdown list and so users can’t pick an item from that list anymore. | |
This attribute specifies what <form> element the dropdown list belongs to. | |
Using this attribute, we can allow users to select multiple items from the drop down list. | |
This attribute is used to set a name for the target dropdown list. | |
This attribute specifies that it is required for users to select an item from the dropdown list. | |
This attribute specifies the number of visible items on the target dropdown list. |