How to make a drop-down list in HTML

The simplest drop-down list in HTML is easy to create using the select tag. This is a container tag, the option tags are embedded into it - they specify the list items.

There are several options for lists that you canmake using the select tag: a drop-down list (the options drop out after clicking on the main field or pointing the cursor at it) and a multiple choice list - in it the user can select several items. The first are more common, they are an important element of the navigation of modern sites. A drop-down list of multiple selections can be applied, for example, in directories where several product characteristics need to be selected.

You can change the appearance and properties of lists using universal and special attributes.

The attributes of the select tag

1. Multiple - sets the multiple choice.

2. Size - specifies the number of visible lines in the list, that is, the height. And then everything depends on whether the attribute is multiple or not. If yes, and you do not specify size, then if there is multiple, the user will see all the possible choices, but if multiple is absent, only one line will be displayed, and the rest of the visitor will be able to read when he presses the elevator icon on the right side. If the height of the size is specified and it is less than the number of options, a scroll bar will appear on the right.

3. Name is the name. A drop-down list can do without it, but it may be necessary to interact with a handler on the server. As a rule, the name still indicates.

The select tag does not have mandatory attributes, unlike the option tag.

Attributes of the nested option tag

1. Selected - is for highlighting a list item. The user can select more than one item if the multiple attribute is specified (see above).
2. Value is the value. This attribute is required. The web server must understand which items the user has selected.
3. Label. With this attribute, you can shorten the list items that are too long. For example, the screen will display "Milan", instead of the "Milan - the administrative center of Lombardy" option specified in the tag. Northern Italy". This attribute is also used to group items in the list.

As for the width of the list, it is set by default according to the length of the widest text in the list. Of course, the width can be changed using HTML styles.

Drop-down list in other ways

It can be done using CSS, for example,The list will appear when you hover the cursor over the page element. Excellent opportunities for creating lists is provided by JavaScript, whose work is simplified by the Jquery library. A drop-down list connected using this library can be very complex, for example, cascaded. That is, when you select an item in one list, the following list appears, for example, there is a menu item "Women's Clothing" (when hovering the types of clothing drop out), then when selecting one of the types, for example, "Outerwear", a list with elements: Parks, coats, short coats, fur coats, etc.

We superficially enumerated the main ways, whenwhose help you can create a drop-down list. Of course, there are a lot of nuances in HTML, in CSS and JavaScript, which allow you to change the functionality and appearance of lists.