Атрибут required тега <select>

Описание

Атрибут required указывает, что выбор значения из <select> обязателен перед отправкой формы. Браузеры автоматически проверяют наличие выбранного значения и блокируют отправку формы, если условие не выполнено.

Пример использования:

<form> <select name="country" required> <option value="">-- Выберите страну --</option> <option value="ru">Россия</option> <option value="us">США</option> </select> <button type="submit">Отправить</button> </form>

Особенности работы:

  • Блокирует отправку формы, если не выбрано значение
  • Работает только при наличии пустого value (value="") в option
  • Поддерживается всеми современными браузерами
  • Может быть переопределен атрибутом formnovalidate на кнопке отправки

Визуальное поведение:

Браузер Индикация ошибки
Chrome Красное выделение и всплывающая подсказка
Firefox Красная тень и сообщение при попытке отправки
Safari Подсветка и текстовое сообщение

Кастомизация проверки:

<style> select:invalid { border-color: #ff4444; box-shadow: 0 0 5px rgba(255, 68, 68, 0.5); } select:valid { border-color: #00c851; } </style> <select required> <option value="">Выберите вариант</option> <option>Вариант 1</option> </select>

Особые случаи:

  • Не работает с disabled или hidden полями
  • Требует пустого value в первом option для корректной работы
  • Может конфликтовать с кастомными валидаторами

Рекомендации:

  1. Всегда добавляйте пустой первый option с value=""
  2. Сочетайте с label для лучшей доступности
  3. Для сложных сценариев используйте JavaScript-валидацию
  4. Тестируйте поведение на разных устройствах