Как сделать выпадающий список в html: Как создать выпадающий список в форме

Содержание

Как сделать выпадающий список в html

Ответы

Вячеслав Межуревский

19 октября 2022

Тег <select> в HTML используется для создания выпадающего списка в HTML форме. С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором). Пункты выпадающего списка определяются с помощью тега <option>. Тег <optgroup> определяет группы пунктов внутри выпадающего списка HTML.

Пример HTML-документа:

<select name="colors">
  <option value="1">Синий</option>
  <option value="2" selected>Зеленый</option>
  <option value="3">Желтый</option>
  <option value="4">Красный</option>
  <option value="5">Оранжевый</option>
  <option value="6">Черный</option>
</select>

Результат:

0 0

Добавьте ваш ответ

Курсы по программированию на Хекслете

Backend-разработка

Разработка серверной части сайтов и веб-приложений

Перейти

Frontend-разработка

Разработка внешнего интерфейса сайтов и веб-приложений и верстка

Перейти

Создание сайтов

Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails

Перейти

Тестирование

Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP

Перейти

Аналитика данных

Сбор, анализ и интерпретация данных на Python

Перейти

Интенсивные курсы

Интенсивное обучение для продолжающих

Перейти

DevOps

Автоматизация настройки локального окружения и серверов, развертывания и деплоя

Перейти

Веб-разработка

Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков

Перейти

Математика

Математика для разработчиков и аналитиков данных

Перейти

JavaScript

Разработка сайтов и веб-приложений и автоматизированное тестирование на JS

Перейти

Python

Веб-разработка, автоматическое тестирование и аналитика данных на Python

Перейти

Java

Веб-разработка и автоматическое тестирование на Java

Перейти

PHP

Веб-разработка и автоматическое тестирование на PHP

Перейти

Ruby

Разработка сайтов и веб-приложений на Ruby on Rails

Перейти

Go

Курсы по веб-разработке на языке Go

Перейти

HTML

Современная верстка с помощью HTML и CSS

Перейти

SQL

Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД

Перейти

Git

Система управления версиями Git, регулярные выражения и основы командой строки

Перейти

Пункт выпадающего списка.

Тег — журнал «Доктайп»

25 января 2023

Справочник

Нейрокекс

Тег <option> используется в элементе <select> для определения доступных пунктов в выпадающем списке.

Синтаксис тега <option>

<select>
  <option value="value1">Вариант 1</option>
  <option value="value2">Вариант 2</option>
  <option value="value3">Вариант 3</option>
  <option value="value4">Вариант 4</option>
</select>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <option> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

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

Простой выпадающий список:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Группировка пунктов в выпадающем списке:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Отключенный пункт списка:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab" disabled>Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Заранее выбранный пункт списка:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab" selected>Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

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

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Значение выпадающего списка по умолчанию:

<select>
  <option value="" disabled selected>Select Car</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Для чего использовать тег <option>

Для установки предпочтений пользователя: используйте тег <option>, чтобы создать выпадающий список для выбора пользователем своих предпочтений, например, языка или темы.
Для фильтрации данных: для создания выпадающего списка, который позволяет пользователям фильтровать данные, отображаемые на веб-странице, например, по категориям или диапазону дат.
Для выбора количества: для создания выпадающего списка, который позволяет пользователям выбирать количество товаров для покупки или резервирования.
Для выбора даты или времени: для создания выпадающего списка, позволяющего пользователям выбрать дату или время для события или встречи.

Для выбора страны: для создания выпадающего списка, позволяющего пользователям выбрать страну, например, для адреса доставки или выставления счета.
Для выбора варианта товара: для создания выпадающего списка, позволяющего пользователям выбрать вариант товара, например, размер или цвет.
Для выбора способа оплаты: для создания выпадающего списка, позволяющего пользователям выбрать способ оплаты, например, кредитную карту или PayPal.

Атрибуты тега <option>

Атрибут	Значение	Пример синтаксиса	Значение по умолчанию	Возможные значения	Обязательный или нет
`value`	Указывает значение, связанное с опцией	`<option value="volvo">Volvo</option>`	Текстовое содержание опции	Любая текстовая строка	Нет
`selected`	Указывает, что опция должна быть предварительно выбрана при загрузке страницы	`<option value="saab" selected>Saab</option>`	Нет	`selected`	Нет
`disabled`	Указывает, что опция должна быть отключена	`<option value="saab" disabled>Saab</option>`	`enabled`	`disabled`	Нет
`label`	Указание метки для опции	`<option value="saab" label="Saab">S</option>`	Текстовое содержание опции	Любая текстовая строка	Нет

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <option> должен использоваться внутри элемента <select>. Если тег не используется внутри элемента <select>, браузер проигнорирует его, и он не будет отображаться на странице.

Поддержка браузеров

Тег поддерживается всеми современными браузерами.

Актуальная информация — на сaniuse.

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

Альтернативных тегов для тега <option> не существует.

Чем заменить тег

Прямой замены тегу <option> не существует.

Актуальность

Тег <option> не является устаревшим.

Как узнать больше об HTML-тегах?

Прочитайте справочник по HTML или попробуйте себя в роли разработчика на интерактивных тренажёрах в HTML Academy. Это бесплатно.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

Попробовать

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Справочник по HTML

Основные HTML-теги в 2023 году.

Справочник

31 марта 2023

Глобальные атрибуты HTML

Список основных атрибутов, которые подойдут ко всему.

Справочник

29 марта 2023