Элемент select позволяет не только стильно предоставлять пользователю выбор, но и обладает рядом функций, сделавших его мощным инструментом в веб-разработке.

Мы изучим создание простых выпадающих списков, научимся управлять выбором по умолчанию, добавим множественный выбор для удобства пользователей, и даже погрузимся в мир группировки элементов с использованием <optgroup>.

Элемент select является мощным инструментом для создания списков выбора. Это может быть как выпадающий список для одиночного выбора, так и раскрытый список для множественного выбора.

Давайте рассмотрим пример выпадающего списка:

<select id="coursme" name="course">
   <option value="HTML">HTML</option>
   <option value="CSS">CSS</option>
   <option value="JS">JavaScript</option>
   <option value="Python">Python</option>
</select>

Элементы <option> представляют собой элементы списка, где value содержит значение, а отображаемый текст - сам элемент.

Добавим выбор элемента по умолчанию и создадим недоступный для выбора заголовок:

<select id="coursme" name="course">
   <option disabled selected>Выберите курс</option>
   <option value="iphone 6s">iPhone 6S</option>
   <option value="lumia 950">Lumia 950</option>
   <option value="nexus 5x">Nexus 5X</option>
</select>

Для множественного выбора добавим атрибут multiple:

<select multiple id="phone" name="phone">
   <option value="HTML">HTML</option>
   <option value="CSS">CSS</option>
   <option value="JS">JavaScript</option>
   <option value="python">python</option>
</select>

Теперь можно выбирать несколько элементов, удерживая клавишу Ctrl.

Группировка элементов с использованием <optgroup> добавляет структурированность:

<select id="course" name="coursme">
   <optgroup label="HTML">
       <option value="HTMLone">Основы</option>
       <option value="HTMLtwo">Разметка текста</option>
       <option value="HTMLthree">Ссылка и изображения</option>
   </optgroup>
   <optgroup label="CSS">
       <option value="CSSone">основы</option>
       <option value="CSSTWO">Селекторы</option>
       <option value="CSSthree">Flex</option>
   </optgroup>
</select>

Эти возможности select обогатят ваше взаимодействие с пользователем, а эксперименты с атрибутами добавят гибкости и удобства в работе с формами на вашем сайте.

Заключение

Освоив мощь создания списков выбора, вы готовы придать вашим веб-формам удобство и стиль, обогатив пользовательский опыт. Применяйте новые знания творчески и эффективно!