The simplest drop-down list in HTML is easy to create using the select tag. This is a container tag, option tags are embedded in it - they specify the list elements.
There are several options for lists that can be done using the select tag: a drop-down list (options appear after clicking on the main field or hovering over it) and a multiple choice list - in it the user can select several items. The former are more common; they are an important element in the navigation of modern sites. Multiple-choice drop-down list can be applied, for example, in catalogs, where it is necessary to select several characteristics of goods.
You can change the appearance and properties of lists using universal and special attributes.
Select tag attributes
1. Multiple - sets a multiple choice.
2. Size - sets the number of visible lines in the list, that is, height. And here it all depends on whether the multiple attribute is present or not. If yes, and you do not specify size, then if there is multiple, the user will see all the possible options, if multiple is absent, then only one line will be shown, and the visitor will be able to read the rest when he clicks on the elevator icon on the right side. If the height size is set and it is less than the number of options, a scroll bar will appear on the right.
3. Name - name. The drop-down list can do without it, but it may be necessary to interact with the handler program on the server. As a rule, the name is still indicated.
The select tag has no required attributes, unlike the option tag.
Attributes of the nested option tag
- Selected - designed to highlight a list item. The user will be able to select more than one item if the multiple attribute is specified (see above).
- Value - value. This attribute is required. The web server must understand exactly which list items the user has selected.
- Label Using this attribute, you can shorten list items that are too long. For example, “Milan” will be displayed on the screen, instead of the one specified in the option tag, “Milan is the administrative center of Lombardy. Northern Italy". This attribute is also used to group items in a 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, a list will appear when you hover over a page element. Javascript provides a great way to create lists, and the Jquery library makes it easy. The drop-down list connected using this library can be very complex, for example, cascading. That is, when you select an item in one list, the following list appears, for example, there is a menu item “Women’s clothes” ( types of clothes fall out when you hover ), then when you select one of the types, for example, “Outerwear”, a list with the items appears: jackets, parks, coats, short coats, fur coats, etc.
We have superficially listed the main methods by which you can create a drop-down list. Of course, there are a lot of nuances in HTML, in CSS and in JavaScript, which allow you to change the functionality and appearance of lists.