Summary  
This chapter covers creating and configuring dropdown menus using the HTML select element, option items, and optgroup grouping, along with attributes to manage selection behavior such as naming, sizing, multiple selection, and disabling.

General domain of usage  
Web forms

The `<select>` element is used to create a dropdown list of options for the user to choose from. It is typically used in forms where the user needs to choose from a predefined set of options.
It is always used in conjunction with `<option>` elements. The `<option>` elements define the individual items in the dropdown list.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPHNlbGVjdD4KICAgIDxvcHRpb24gdmFsdWU9InRvbWF0byI+dG9tYXRvPC9vcHRpb24+CiAgICA8b3B0aW9uIHZhbHVlPSJjdWN1bWJlciI+Y3VjdW1iZXI8L29wdGlvbj4KICAgIDxvcHRpb24gdmFsdWU9ImxldHR1Y2UiPmxldHR1Y2U8L29wdGlvbj4KICA8L3NlbGVjdD4KICA8YnV0dG9uIHR5cGU9InN1Ym1pdCI+U3VibWl0PC9idXR0b24+CjwvZm9ybT4=

The `<select>` element also has several attributes that can be used to modify its behavior, including:

- `name`: the name of the select element, used when submitting the form;
- `size`: the number of visible options in the dropdown list;
- `multiple`: if present, allows the user to select multiple options;
- `disabled`: if present, disables the select element.

To divide a list into separate, unrelated groups, you can use the `<optgroup>` tag. The `label` attribute is used to assign a title to the group.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0ic3BvcnQiPkZhdm9yaXRlIFNwb3J0PC9sYWJlbD4KICA8c2VsZWN0IG5hbWU9InNwb3J0IiBpZD0ic3BvcnQiPgogICAgPG9wdGdyb3VwIGxhYmVsPSJUZWFtIHNwb3J0Ij4KICAgICAgPG9wdGlvbiB2YWx1ZT0ic29jY2VyIj5zb2NjZXI8L29wdGlvbj4KICAgICAgPG9wdGlvbiB2YWx1ZT0iYmFza2V0YmFsbCI+YmFza2V0YmFsbDwvb3B0aW9uPgogICAgICA8b3B0aW9uIHZhbHVlPSJob2NrZXkiPmhvY2tleTwvb3B0aW9uPgogICAgPC9vcHRncm91cD4KCiAgICA8b3B0Z3JvdXAgbGFiZWw9IkluZGl2aWR1YWwgc3BvcnQiPgogICAgICA8b3B0aW9uIHZhbHVlPSJib3hpbmciPmJveGluZzwvb3B0aW9uPgogICAgICA8b3B0aW9uIHZhbHVlPSJzd2ltbWluZyI+c3dpbW1pbmc8L29wdGlvbj4KICAgICAgPG9wdGlvbiB2YWx1ZT0ic2tpaW5nIj5za2lpbmc8L29wdGlvbj4KICAgIDwvb3B0Z3JvdXA+CiAgPC9zZWxlY3Q+CiAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlN1Ym1pdDwvYnV0dG9uPgo8L2Zvcm0+

By default, the first `<option>` is chosen in the list. If you want to change it, you can provide the `selected` attribute to any `<option>` element.

Note

What is the main function of the `<select>` element in HTML?

Learn the essentials of HTML, the backbone of every website. Structure content with tags and attributes, build clear document layouts, and add images, links, and tables. Create accessible, user-friendly forms for capturing input and interaction. Practice crafting well-structured, functional web pages while following best practices. Start your web development journey by mastering HTML.

Explore the inner workings of the web. Learn how data travels across networks, discover the role of protocols, and unravel the mysteries of IP addresses and domain names. Gain a high-level understanding of how web browsers and servers communicate to deliver web content.

Discover the power of tags to structure content, from headings and paragraphs to lists and tables. Learn how to enhance the elements with attributes.

The core of HTML document structure. Learn the components of an HTML document, including the doctype declaration, head, and body. Understand the purpose of each element and how they contribute to the overall structure of a webpage.

Make a web page more appealing with the help of media such as images, audio, and video. Work with structured tabular data in the form of tables.

Explore the versatility of HTML forms. Learn to design intuitive and user-friendly forms by leveraging key concepts and techniques. Discover how forms enable user interaction and data submission on websites. 

Using the Select Element for Dropdown Menus