Атрибут value тега <option>
Описание
Атрибут value определяет значение, которое будет отправлено на сервер при выборе соответствующей опции в элементе <select>. Если атрибут не указан, в качестве значения будет использован текст внутри <option>.
<select name="country">
<option value="ru">Россия</option>
<option value="us">США</option>
<option value="fr">Франция</option>
</select>
Основные характеристики:
| Сценарий | Отправляемое значение | Пример |
|---|---|---|
| С указанным value | Значение атрибута value | <option value="1">Январь</option> → "1" |
| Без value | Текст опции | <option>Январь</option> → "Январь" |
| Пустой value | Пустая строка | <option value="">-- Выберите --</option> → "" |
Рекомендации по использованию:
- Используйте для отправки серверу идентификаторов вместо текста
- Для обязательных полей добавляйте пустую опцию с value=""
- Сохраняйте единый формат значений (все числа или все строки)
- Избегайте сложных структур - используйте простые значения
Пример с числовыми значениями:
<select name="quantity">
<option value="1">1 штука</option>
<option value="2">2 штуки</option>
<option value="5">5 штук</option>
</select>
Пример с формами:
<form action="/submit" method="post">
<select name="user_role" required>
<option value="" selected disabled>Выберите роль</option>
<option value="admin">Администратор</option>
<option value="editor">Редактор</option>
</select>
<button type="submit">Отправить</button>
</form>
Особенности работы:
- Значение включается в данные формы при отправке
- Для множественного выбора (
multiple) отправляются все выбранные значения - Если ни одна опция не выбрана, отправляется значение первой опции
- Для обязательного выбора используйте атрибут
required
Примечание: В современных SPA-приложениях (React, Angular, Vue) значение select обычно управляется через состояние компонента, а не через атрибут value HTML-элемента.