How to Create a Drop-down List In HTML


In this article, we show how to create a drop down list in HTML.

How to Create a Drop-down list in HTML

Below is a drop-down list in HTML which is very common in forms on the web, such as when a user needs to select a single item when given a list of choices:

In a drop-down list, a user can only specify one choice out of the several that are given.


To create the drop-down list shown above, the HTML code is:

Every form element in HTML must be enclosed by the form tag. So in this case, since we are creating a drop-down list, this must be closed in a pair of opening and closing form tags.

The label tag gives the name of the text box, which in this case is "What Fruit Do You Like Most?"

After this, we now create the actual drop-down list.

This is done with a pair of opening and closing select tags. This tag must have an id attribute which gives a description as to its function. In this case, since we are asking the user what is his or her favorite fruit is, the name of the id tag is "SelFruit".

After the opening Select tag, opening and closing option tags are used. These give the choices that the user can select from the drop-down list. This tag must have a value attribute. This attribute , which many of the times when specifiying a string text will be the same as the name.

Formal Elements To Create Drop-down List
id- The id attribute creates an identifier for the field. When you use a programming language to extract data from this element, use id to specify which field you're referring to. An id field often begins with a hint phrase to indicate the type of object is is. So, for instance, sel, in this case, indicates a drop-down select box.

Option Tag- Each option tag must have a "value" attribute, which, in many instances, is the same as the text that users will see placed in between the opening and closing option tags. The person viewing the page doesn't see the value that is in the "value" attribute, but programming languages can extract data from it, so it can be used for classification.

Apart from the "value" attribute, the more important thing is the text that goes in between the opening and closing option tags. This is the text that appears on a selection menu of a drop-down list which users see.

You use each pair of option tags for each choice in a drop-down selection list. So if you're listing 7 choices a user can select from, there should be 7 pairs of opening and closing option tags, one for each selection.

Close the selection tag- After you've finishing listing all the selections, remember to close the selection tag, as shown above in the code.

To find out how to retrieve data from a drop-down list using PHP, see the resource How to Retrieve Data from a Drop-down List with PHP

HTML Comment Box is loading comments...