html

HTML Select Tag

HTML comprises various tags that are meant to serve extremely useful purposes. One of the most frequently used tags of HTML is the select tag. This tag is used for creating dropdown lists, and the dropdown lists let the user choose an option of their choice from the given list. The dropdown lists are primarily used in web forms to collect survey data. In this tutorial, we will teach you the usage of the select tag in HTML with the help of a few examples.

How To Use the Select Tag in HTML?

It is very easy to use the select tag in HTML, and you will realize it by going through the following two examples:

Example # 1: Selecting the Place of Residence

In this example, we want to create a web page that will display a dropdown list and allow the users to select their places of residence from that dropdown list. For doing so, we have written the HTML script shown in the following image:

In this script, we have used the select tag of HTML to create a dropdown list of four different countries. Then, we used the “option value” tags to state all the four elements, i.e., the names of the four countries on this dropdown list. After that, we created a “submit” button to enhance our web page’s appearance. However, this button will not navigate us anywhere since we have not created any associated action page.

Upon the execution of this HTML script with Google Chrome, the following web page appeared on our browser:

When you click on this dropdown list, you will be able to select a country of your choice, as shown in the image below:

Example # 2: Selecting the Favorite Programming Language

This is another example of using the select tag of HTML. In this example, we will create a dropdown list for letting the user choose their favorite programming language. The HTML script for this purpose is shown in the following image:

We have created a dropdown list of four programming languages in this HTML script using the “select” tag of HTML. Then, we simply mentioned the elements of this list by using the “option value” tag of HTML. Like our first example, we have a dummy “submit” button in this HTML script.

The web page displaying our newly created dropdown list is shown in the following image:

When you will click on this dropdown list, you will be allowed to select a programming language of your choice, as shown in the following image:

Conclusion

Today, we wanted to convey the usage of the select tag of HTML to our readers. For doing so, we first introduced you to the purpose of this HTML tag, followed by some examples that explained the step-wise procedure of using this tag. We ended up creating two different dropdown lists. Following the same lines, you can create as many dropdown lists of your choice in HTML as you wish.

About the author

Ayesha Sajid

Ayesha Sajid has secured a Bachelor's degree in Computer Sciences and a Master's degree in Information Security. She is a technical content writer by profession who has around four years of experience in working with Windows and different flavors of the Linux operating system. She also has a keen interest in exploring the latest technology trends.