Как сделать выпадающий список в HTML: практический гайд

Вот вам реально полезный материал по созданию выпадающих списков — такой, какой я сам искал, когда только начинал работать с формами.

Базовый вариант (минимум кода)

👉 `<select>

<option>Выберите город</option> <option>Москва</option> <option>Санкт-Петербург</option> <option>Новосибирск</option> </select>`

Работает сразу, ничего дополнительного не нужно.

Продвинутая версия (для реальных проектов)

👉 `<label for="city-select">Ваш город:</label>
<select id="city-select" name="city" required>

<option value="" disabled selected>— Выберите —</option> <option value="msk">Москва</option> <option value="spb">Санкт-Петербург</option> <option value="nsk">Новосибирск</option> </select>`

Что мы улучшили:

1. Добавили label для доступности
2. Указали name для обработки формы
3. Сделали обязательный выбор (required)
4. Использовали value для отправки на сервер

Группировка вариантов

Когда нужно сгруппировать пункты:

👉 `<select>

<optgroup label="Россия"> <option>Москва</option> <option>Санкт-Петербург</option> </optgroup> <optgroup label="Зарубежье"> <option>Берлин</option> <option>Париж</option> </optgroup> </select>`

Множественный выбор

Если нужно выбрать несколько вариантов:

👉 `<select multiple size="4">

<option>HTML</option> <option>CSS</option> <option>JavaScript</option> <option>PHP</option> </select>`

Удерживайте Ctrl (Cmd на Mac) для выбора нескольких пунктов.

Стилизация через CSS

Базовые стили для улучшения вида:

👉 <style> select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; width: 200px; } </style>

Частые проблемы и решения

1. Не работает required
   Проверьте, что у первого option есть disabled и selected
2. Плохо выглядит на мобильных
   Добавьте в head:
   👉 <meta name="viewport" content="width=device-width, initial-scale=1">
3. Нужен поиск по вариантам
   Используйте JavaScript-библиотеки типа Select2

Работа с данными

1. Получение выбранного значения на JavaScript:
   👉 document.querySelector('select').value
2. Установка выбранного значения:
   👉 document.querySelector('select').value = 'msk'

Альтернативы

Для сложных случаев рассмотрите:

• Библиотеки (Select2, Choices.js)
• Кастомные решения на div'ах
• Компоненты UI-фреймворков (Bootstrap, Material UI)

Важные нюансы

1. Всегда используйте label — это важно для доступности
2. Для обязательного выбора — required
3. Указывайте значения в value, а не только текст
4. Тестируйте на мобильных устройствах

Попробуйте создать свой список прямо сейчас — это лучший способ запомнить синтаксис. Если возникнут вопросы — пишите в комментарии, разберём конкретные случаи.