title drop-down list html

Introduction to Dropdown List in HTML

The dropdown list in HTML is an important element for form building purposes or for showing the selection list from which the user can select one or multiple values. This kind of selection list in HTML is known as the Dropdown list. It is created using tag with value. It allows the user to choose any option as per their choice. It is always a good practice to use the drop-down list when you know the option value so that one can set any value as a default attribute, and others will be as option values.

Syntax of Dropdown List in HTML

Lets see how the Dropdown list is going to be created:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Syntax:

option1
option2
option3
option3

Example:

Red
Purple

As shown in the above syntax , is a tag used to create Dropdown list. tag enclosed in the select tag is an attribute value or attributes for selection list, the value will be for showing whether the option is selected, disabled or with any other properties.option1,2.will be the name. With the help of CSS, we can give effects to our selection list, able to set positions like a relative, absolute, etc., able to set width and do many other functions.

Setting background color or color to the hover by using code:

.dropdown a:hover{
Background-color: color_name;
}

Position for the dropdown list is defined into two values: position: a relative who is used to display the content of the list exactly right below the select list button. With the help of position: absolute;

Min-width is one of the properties used to give a specific width to the Drop Down list. We can set it as long as our drop-down button by setting the width to 100%. The above syntax is defined for single attribute selection; now, we will see how multiple options are going to be selected from the item list.

Popular Course in this category

HTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (7,973 ratings)

Course Price

View Course

---

Related Courses

Bootstrap Training (2 Courses, 6+ Projects)XML Training (5 Courses, 6+ Projects)CSS Training (9 Courses, 9+ Projects)

Syntax:

option1
option2

Example:

Math
English
Science
Biology

How does the Dropdown List work in HTML?

After studying the syntax now, we will see how exactly the Dropdown list is going to work in HTML. There are some attributes that are used in the tag, which are as follows:

1. Name: This attribute is helpful to assign a name to the control, which is going to send to the server to be identified and take the required value.
2. Multiple: If the attribute is set to multiple then, the user can select multiple values from the selection list.
3. Size: The size attribute is used to define a specific sized scrolling box around the Dropdown list. It is also helpful for displaying several visible options from the list.
4. Value: This attribute will show an option in the selection list is selected.
5. Selected attributes enable at the very starting points of page loads to show already selected list item from the list.
6. Label: Label attributes works as another approach to labeling options value.
7. Disabled: If we want to show a drop-down list with a disable option, it is possible to use a disabled attribute in the HTML select list.
8. onChange: Whenever the user is going to select anyone the option from the dropdown list, then the event is triggered on item selection.
9. onFocus: Whenever the user hovers the mouse on the selection list to select an option from the list, it triggers an event to select the item.
10. Form: This attribute is used to define one or multiple forms that are related to the select field.
11. disabled: We should keep our drop-down list disable from the user with the help of this attribute.
12. required: Whenever filling some form, we want to show that this field is necessary to select any value from its list before actual sending form, so in this case, we define that the user is required to select any one value from the list.

Examples ofHTML Code

The following examples will show how exactly the Dropdown list is going to be used:

Example #1

Code:

Seven Wonders of the world

Taj Mahal
Great Wall of China
Christ the Redeemer Satue
Machu Picchu
Chichen Itza
The Roman Colosseum
Petra

The above example contains different options like disabled, selected, required, etc., which is shown in the output screen.

Output:

Example #2

Code:

Multiple options can be selected here .Please press ctrl key and select multiple options at a time.

As shown in the below screenshot, select multiple options from the dropdown list, press the given button and select multiple options by pressing on CTRL.

Output:

Example #3

Code:

Hover Dropdown Demo

The dropdown list will be open on the hover effect.

Output:

Conclusion

We can conclude that the Dropdown list is used to select an option from the selection list. It is used to select single or multiple options at a time. Users can select an option from the list as per their choice, so it becomes more user-friendly. Attributes listed above is used with the select tags to do various selection operations with the Dropdown list.

Recommended Article

This is a guide to Dropdown List in HTML. Here we discuss how Dropdown List Work in HTML and its Examples with Code Implementation. You can alsogo through our other related articles to learn more

1. HTML Style Attribute
2. Top 10 Advantages of HTML
3. HTML Frames
4. HTML Layout