Option по умолчанию html
Один пункт в раскрывающемся списке .
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
Тег используется в интерактивных элементах управления для вёрстки одиночного пункта списка.
Пример
Скопировать ссылку «Пример» Скопировано
form> label for="city-select">Ваш городlabel> select name="city" id="city-select"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select> form>
Подробно
Скопировать ссылку «Подробно» Скопировано
Тегом размечается каждый элемент выпадающего списка , группы опций или перечня .
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
disabled
Скопировать ссылку «disabled» Скопировано
Атрибут булевого типа. Если задан, то пункт списка нельзя выбрать. Часто браузеры выделяют такой элемент управления серым цветом, и на нём не срабатывают события клика или фокуса. Даже если атрибут не задан, элемент всё равно может быть отключён, если находится внутри тега с заданным атрибутом disabled .
select name="city1"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara" disabled>Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>
label
Скопировать ссылку «label» Скопировано
Значение этого атрибута задаёт текст пункта в списке. Если атрибут не задан, то в качестве значения берётся текстовое содержимое тега .
select name="city2"> option value="petersburg" selected label="Ленинград">Санкт-Петербургoption> option value="samara" label="Куйбышев">Самараoption> option value="volgograd" label="Сталинград">Волгоградoption> option value="ekaterinburg" label="Свердловск">Екатеринбургoption> select>
Несмотря на то, что задано текстовое содержимое тега , в выпадающем списке отображаются значения из атрибутов label :
selected
Скопировать ссылку «selected» Скопировано
select name="city3"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan" selected>Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>
select name="city4" multiple size="6"> option value="petersburg">Санкт-Петербургoption> option value="moscow" selected>Москваoption> option value="kazan" >Казаньoption> option value="samara" selected>Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>
value
Скопировать ссылку «value» Скопировано
Если выбран какой-то пункт списка, то при отправке формы на сервер будет передано значение атрибута value этого пункта. Если атрибут не задан, то при отправке будет использоваться текстовое содержимое тега .
На практике
Скопировать ссылку «На практике» Скопировано
Денис Ежков советует
Скопировать ссылку «Денис Ежков советует» Скопировано
🛠 Раньше браузеры не предоставляли никаких средств для нормальной стилизации элемента , и это доставляло очень много головной боли фронтенд-разработчикам 🙁 Стиль элементов можно было поменять, только если тегу был задан атрибут multiple . Тогда список целиком становился частью потока страницы, и мы имели возможность применять стили к его элементам. Вот как выглядело решение:
select name="city" id="city-select" multiple> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>
select counter-reset: cnt;> option:nth-child(2n) background-color: #282a2e;> option counter-increment: cnt;> option::before content: counter(cnt) ". ";>select counter-reset: cnt; > option:nth-child(2n) background-color: #282a2e; > option counter-increment: cnt; > option::before content: counter(cnt) ". "; >
Теперь практически все браузеры умеют стилизовать даже без атрибута multiple .
В Safari стилизация для доступна не полностью, даже если тег имеет атрибут multiple .
Атрибут selected
Делает текущий пункт списка выделенным. Если у тега добавлен атрибут multiple , то можно выделять более одного пункта.
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Option по умолчанию html
Атрибуты тега :
- value — указывает значение, связанное с опцией.
- selected — указывает, что опция должна быть предварительно выбрана при загрузке страницы.
- disabled — указывает, что опция должна быть отключена.
- label — указание метки для опции.
Примеры использования
Простой выпадающий список:
Группировка пунктов в выпадающем списке:
Заранее выбранный пункт списка:
Значение выпадающего списка по умолчанию:
Для чего использовать тег
- Для установки предпочтений пользователя: используйте тег , чтобы создать выпадающий список для выбора пользователем своих предпочтений, например, языка или темы.
- Для фильтрации данных: для создания выпадающего списка, который позволяет пользователям фильтровать данные, отображаемые на веб-странице, например, по категориям или диапазону дат.
- Для выбора количества: для создания выпадающего списка, который позволяет пользователям выбирать количество товаров для покупки или резервирования.
- Для выбора даты или времени: для создания выпадающего списка, позволяющего пользователям выбрать дату или время для события или встречи.
- Для выбора страны: для создания выпадающего списка, позволяющего пользователям выбрать страну, например, для адреса доставки или выставления счета.
- Для выбора варианта товара: для создания выпадающего списка, позволяющего пользователям выбрать вариант товара, например, размер или цвет.
- Для выбора способа оплаты: для создания выпадающего списка, позволяющего пользователям выбрать способ оплаты, например, кредитную карту или PayPal.
Глобальные атрибуты
Ограничения
Тег должен использоваться внутри элемента . Если тег не используется внутри элемента , браузер проигнорирует его, и он не будет отображаться на странице.
👉 Другие теги для создания форм
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.