Тег <option>: подпись, значение и исходный выбор

Назначение

Элемент option описывает один вариант в списке выбора. Важно различать текст, который видит человек, и значение, которое получает обработчик формы.

Как это работает

Value задаёт отправляемое значение. Если его нет, значение определяется текстом варианта. Selected обозначает исходный выбор в разметке; текущее состояние после действий пользователя может отличаться от этого атрибута.

Пример

<label for="format">Формат материала</label>
<select id="format" name="format" required>
  <option value="">Выберите формат</option>
  <option value="article" selected>Статья</option>
  <option value="exercise">Упражнение</option>
  <option value="video" disabled>Видео — временно недоступно</option>
</select>

Что должно получиться

Сначала выбрана «Статья», но её значение — article. Если выбрать пустой первый вариант, поле required в обычной форме потребует непустого выбора перед отправкой. Недоступный вариант остаётся объяснён текстом.

Граница применения и частая ошибка

В одиночном select не задавайте selected сразу нескольким вариантам. Нельзя считать значение из списка доверенным: пользователь способен изменить запрос. Проверка допустимых значений на сервере обязательна для реального обработчика.

Самостоятельная проверка

Измените выбор, затем изучите value у select, свойство selected и исходный атрибут selected у option. Объясните, почему после взаимодействия чтение одного HTML-атрибута не всегда показывает текущее состояние.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Связанные материалы

• Выбор значения
• Группы полей
• Таблицы