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

Тег HTML выпадающий список

Рейтинг: 4 из 5, голосов 33

28 декабря 2019 г.

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

С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором).

Пункты выпадающего списка определяются с помощью тега <option>. Тег <optgroup> определяет группы пунктов внутри выпадающего списка HTML.

Выпадающий список в HTML является одним из элементов форм. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

При отправке формы, на сервер будет отправлена переменная, в качестве названия имеющая имя списка select (значение атрибута name), содержащая значение выбранного пункта списка. Если в выбранном пункте списка <option> есть атрибут value, то значением считается его содержимое, в противном случае значением считается содержимое тега <option>.

Синтаксис

<select>элементы списка</select>

Примеры использования выпадающего списка <select> в HTML коде

Ниже представлены 4 основных варианта выпадающих списков HTML.

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

СинийЗеленыйЖелтыйКрасныйОранжевыйЧерный

HTML код простого выпадающего списка

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

Выпадающий список с выбором нескольких значений

Добавить списку возможность множественного выбора (выбора одновременно нескольких значений) можно используя атрибут multiple. Количество одновременно выводимых на экран пунктов списка с множественным выбором регулируется с помощью атрибута size.

Атрибут name такого списка должен заканчиваться символами «[]», например, name=»cars[]».

NissanToyotaBMWWolksvagenSkodaMercedes-Benz

HTML код выпадающего списка с выбором нескольких значений

<select name="user_cars[]" multiple="multiple" size="4">
<option value="1">Nissan</option>
<option value="2">Toyota</option>
<option value="3">BMW</option>
<option value="4">Wolksvagen</option>
<option value="5">Skoda</option>
<option value="6">Mercedes-Benz</option>
</select>

Раскрывающийся список с группами пунктов

Пункты в HTML списке select можно группировать с помощью тега <optgroup>. Название группы не доступно для выбора, служит для удобства пользователей.

МоскваСанкт-ПетербургНовосибирскКиевХарьковЛьвовМинскБобруйскГомель

HTML код раскрывающегося списка с группами пунктов

<select name="user_city">
<optgroup label="Россия">
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
<option value="3">Новосибирск</option>
</optgroup>
<optgroup label="Украина">
<option value="4">Киев</option>
<option value="5">Харьков</option>
<option value="6">Львов</option>
</optgroup>
<optgroup label="Беларусь">
<option value="7">Минск</option>
<option value="8">Бобруйск</option>
<option value="9">Гомель</option>
</optgroup>
</select>

HTML список обязательный для заполнения (выбора)

Для того, чтобы создать список select, обязательный для заполнения (<select> список, где пользователь должен обязательно выбрать значение) нужно использовать атрибут required, а также добавить внутрь списка первым пунктом <option> с пустым значением атрибута value.

Выберите значениеСинийЗеленыйЖелтыйКрасныйОранжевыйЧерный

HTML код выпадающего списка обязательного для выбора (заполнения)

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

Поддержка браузерами

Атрибуты тега select

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

by Lebedev

Тег | htmlbook.ru

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

Описание

Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Атрибуты

accesskey

Позволяет перейти к списку с помощью некоторого сочетания клавиш.

autofocus

Устанавливает, что список получает фокус после загрузки страницы.

disabled

Блокирует доступ и изменение элемента.

form

Связывает список с формой.

multiple

Позволяет одновременно выбирать сразу несколько элементов списка.

name

Имя элемента для отправки на сервер или обращения через скрипты.

required

Список обязателен для выбора перед отправкой формы.

size

Количество отображаемых строк списка.

tabindex

Определяет последовательность перехода между элементами при нажатии на клавишу Tab

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

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT</title>
 </head>
 <body>  
 
  <form action="select1.php" method="post">
   <p><select size="3" multiple name="hero[]">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Строчные элементыФормы

• Поле со списком

Тег выбора HTML

❮ Предыдущий Полный справочник HTML Далее ❯

Пример

Создайте раскрывающийся список с четырьмя параметрами:

Выберите автомобиль:

Вольво

Saab
Мерседес
Ауди

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

---

Определение и использование

Элемент

используется для создания раскрывающегося списка.

Элемент чаще всего используется в форме для сбора пользовательского ввода.

Атрибут имя необходим для ссылки данные формы после отправки формы (если вы опустите name , никакие данные из выпадающего списка не будут отправлены).

Атрибут id необходим для связи выпадающий список с меткой.

Теги

внутри элемента определяют доступные параметры в выпадающий список.

Совет: Всегда добавляйте тег для лучших практик доступности!

---

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

Элемент
<выбрать>	Да	Да	Да	Да	Да

---

---

Атрибуты

Атрибут	Значение	Описание
автофокус	автофокус	Указывает, что раскрывающийся список должен автоматически получать фокус при загрузке страницы.
отключен	отключен	Указывает, что раскрывающийся список должен быть отключен
форма	form_id	Определяет, какой форме принадлежит раскрывающийся список.
несколько	несколько	Указывает, что можно выбрать сразу несколько параметров
имя	имя	Определяет имя раскрывающегося списка
требуется	требуется	Указывает, что пользователь должен выбрать значение перед отправкой формы
размер	номер	Определяет количество видимых опций в раскрывающемся списке

---

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

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

---

Атрибуты событий

9Тег 0027 также поддерживает атрибуты событий в HTML.

---

Дополнительные примеры

Пример

Используйте с тегами:

Выберите автомобиль:

Вольво
Saab


Мерседес
Ауди

Попробуйте сами »

---

Связанные страницы

Ссылка HTML DOM: Select Object

Учебник CSS: Стилизация форм

---

Настройки CSS по умолчанию

Нет.

❮ Предыдущий Полный справочник HTML Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

HTML выбрать несколько атрибутов

❮ Тег HTML

Пример

Раскрывающийся список, позволяющий выбрать несколько вариантов:

Выберите автомобиль:

Вольво
Saab
Опель
Ауди

Попробуйте сами »

---

Определение и использование

Атрибут , умноженный на , является логическим атрибутом.

При наличии указывает, что можно выбрать несколько вариантов один раз.

Выбор нескольких параметров различается в разных операционных системах и браузерах:

• Для Windows: удерживайте нажатой кнопку управления (ctrl), чтобы выбрать несколько вариантов
• Для Mac: удерживайте командную кнопку, чтобы выбрать несколько параметров

Из-за разных способов сделать это, а также из-за того, что вы должны информировать пользователю доступен множественный выбор, он более удобен в использовании вместо этого флажки.

---

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

Атрибут
несколько	Да	Да	Да	Да	Да

---

Синтаксис

---

❮ HTML-тег

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

90902 Top6s Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.