Input type выпадающий список: Элементы HTML форм — выпадающий список (теги select, option, optgroup), текстовое поле (textarea), а также применение label, fieldset и legend

Содержание

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

Тег <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[]».

Nissan Toyota BMW Wolksvagen Skoda Mercedes-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

Атрибут	Значения	Описание
autofocus	не указывается / autofocus	Логический атрибут. Если указан, при загрузке документа фокус будет переведен на список.
disabled	не указывается / disabled	Логический атрибут. Если указан, делает список неактивным. Данные списка, отмеченного этим атрибутом, не будут переданы на сервер при отправке формы. Атрибут также отключает возможность изменения состояния списка пользователем (например, изменение выбранного пункта).
form	id формы	Указывает на форму, к которой относится список. Используется, если список <select> находится вне HTML кода формы. Если список находится внутри тега <form>, то использовать атрибут form не нужно, список по умолчанию привязан к форме, внутри которой находится.
multiple	не указывается / multiple	Логический атрибут. Открывает возможность множественного выбора. Если указан, вместо выпадающего списка будет выведен список с возможностью выбрать несколько значений (пунктов) одновременно. Количество элементов, доступных без скроллинга регулируется атрибутом size.
name	текст	Имя списка. Используется при передаче данных формы на сервер. Значение списка будет передано в переменной, имеющей имя, указанное в этом атрибуте.
required	не указывается / required	Логический атрибут. Если указан, список будет определен как обязательный для заполнения (обязательный для выбора). Форма не будет отправлена на сервер, если в таком списке не будет выбрано ни одно значение. Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным списком браузеры обычно выводят на экран ошибку заполнения.
size	число	Количество пунктов списка, одновременно выводимых на экран. Для выпадающего списка используется значение 1. Это значение по умолчанию. Если значение больше чем 1, вместо выпадающего списка будет выведен список со скроллингом.

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

Поле со списком | htmlbook.ru

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

<select атрибуты>
  <option атрибуты>Пункт 1</option>
  <option атрибуты>Пункт 2</option> 
</select>

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

Чебурашка Крокодил Гена Шапокляк Крыса Лариса	Чебурашка Крокодил Гена Шапокляк Крыса Лариса
Список множественного выбора	Раскрывающийся список

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

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

multiple

Наличие multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки.

Чебурашка Крокодил Гена Шапокляк Крыса Лариса	Чебурашка Крокодил Гена Шапокляк Крыса Лариса
Атрибут size отсутствует	Атрибут size равен 2

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

В примере 1 показано создание списка множественного выбора.

Пример 1. Список множественного выбора

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="select" size="3" multiple>
    <option selected value="s1">Чебурашка</option>
    <option value="s2">Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s4">Крыса Лариса</option>
   </select>
   <input type="submit" value="Отправить"></p> 
  </form>
 </body>
</html>

name

Определяет уникальное имя элемента <select>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.

size

Устанавливает высоту списка. Если значение size равно единице, то список превращается в раскрывающийся. Значение по умолчанию зависит от атрибута multiple. Если он присутствует, то размер списка равен числу элементов. Когда multiple нет, то значение атрибута size равно 1.

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

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

selected

Делает текущий пункт списка выделенным. Если у тега <select> добавлен атрибут multiple, то можно выделять более одного пункта.

value

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задаётся атрибутом name тега <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.

label

Предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри тега <option> игнорируется и в списке выводится значение label. Браузер Firefox не поддерживает этот атрибут.

Создание списка показано в примере 2.

Пример 2. Использование списка

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><strong>Выбери персонажа</strong></p>
   <p><select name="hero">
    <option value="s1">Чебурашка</option>
    <option value="s2" selected>Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s3" label="Лариса">Крыса Лариса</option>
   </select> 
   <input type="submit" value="Отправить"></p>
  </form> 
 </body>
</html>

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег <optgroup>. Он представляет собой контейнер, внутри которого располагаются теги <option> объединённые в одну группу. Особенностью тега <optgroup> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label, как показано в примере 3.

Пример 3. Группирование элементов списка

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="food">
    <optgroup label="Русская кухня">
     <option value="r1">Закуска Барская</option>
     <option value="r2">Раки, фаршированные по-царски</option>
     <option value="r3">Биточки в горшочке</option>
    </optgroup>
    <optgroup label="Украинская кухня">
     <option value="u1">Галушки славянские</option>
     <option value="u2">Пампушки украинские</option>
     <option value="u3">Жаркое по-харьковски</option>
    </optgroup>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Группированный список

Стилизация Select-Option (почти) без JavaScript / Хабр

Стилизация некоторых стандартных элементов — довольно нетривиальная задача.

Разумеется, хороший специалист может стилизовать что угодно, однако всё упирается в сложность этого действия.

Для стилизации радиокнопок и чекбоксов потребуется совсем немного времени — идея стилизации label со скрытыми input не нова, и давно и повсеместно используется.

Для стилизации остального — есть JavaScript.

Сегодня я хочу рассказать Вам о том, как можно относительно просто стилизовать выпадающие списки, с минимальным кодом JavaScript (от 0 до 26 строк) и минимальной дополнительной разметкой HTML.

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

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

А зачем?

Обычно этот вопрос ведёт к умудрённой прокрастинации, переосмыслению жизни и т.д., но в этот раз что-то пошло не так, и я понял, что вопрос и правда был хорошим, а главное — полезным.

Небольшой ликбез:

Итак, для тех, кто в танке, а также тех, кому выпадающие списки доставили столько боли, что они решили забыть о них, как о страшном сне, я немножко (правда) напомню о том, что это такое.

Выпадающие списки состоят из 2 основных элементов:

Select — контейнер для всего списка
Option — элемент списка

Иногда используется ещё и OptGroup (группа элементов списка), но его реализация пока что остаётся на JavaScript’е.

Основной функционал выпадающего списка — отправка информации о выбранном(ых) пункте(ах) на сервер.

Для полноты картины, вот список атрибутов элементов (чтобы можно было оценить, сколько из них будут реализованы):

Select — disabled, form, multiple, name, required, size
Option — disabled, label, selected, value

На этом, пожалуй, закончим с описанием, и перейдём к реализации.

Уже было написано немало слов, поэтому — ближе к коду:

<form>
  <div>
    <h4>Описание 0 пункта</h4>

    <input type="radio" value="0" name="selectName" />
    <label for="selectName0">Описание 0 пункта</label>
    <input type="radio" value="1" name="selectName" />
    <label for="selectName1">Описание 1 пункта</label>
    <input type="radio" value="2" name="selectName" />
    <label for="selectName2">Описание 2 пункта</label>
  </div>
</form>

Итак, чем же хорош этот код? (всё, без чего можно обойтись при объяснении, убрано специально)

Давайте отметим, какие пункты из функционала Select и Option автоматически стали возможны, за счёт использования input + label:

Select — form, name, required
Option — disabled, label, selected, value

И вот всё, что остаётся реализовать:

Select — disabled, multiple, size
Option — полностью реализовано

Всего лишь добавлением связок input + label, мы сократили список необходимого функционала с 10 пунктов до 3. Неплохо, но ведь это не конец, верно?

Чтобы реализовать пункт Select.multiple (множественный выбор) — достаточно сделать так:

<form>
  <div>
    <input type="checkbox" value="0" name="selectName" />
    <label for="selectName0">Описание 0 пункта</label>
    <input type="checkbox" value="1" name="selectName" />
    <label for="selectName1">Описание 1 пункта</label>
    <input type="checkbox" value="2" name="selectName" />
    <label for="selectName2">Описание 2 пункта</label>
  </div>
</form>

Мы всего-навсего меняем тип input’ов с Radio на Checkbox, и получаем практически полный аналог multiple.

Разница в том, что для множественного выбора не нужно зажимать ctrl (ну а если кто-то хочет полностью имитировать функционал — JavaScript в помощь).

Что осталось?

Select — disabled, size
Option — полностью реализовано

Ну что ж, и Select.disabled и Select.size предельно просто реализуются с помощью CSS:

Select.size — какой зададите размер, такой и будет. Необходимо будет просто добавить контейнер.
Select.disabled — для контейнера нужно добавить pointer-events: none, чтобы отменить реакцию на любые действия пользователя (наведение, клики и т.д.), ну и можно сделать его чуть прозрачным.

Итак, основной функционал есть. Чего не хватает?

Нужно также добавить автозаполнение заголовка для выпадающего меню с единственным выбором, а также возникнет проблема при сбросе формы (кнопка Reset), т.к. заголовок не сбросится. Но и это — вполне решаемо (с помощью JavaScript).

А теперь — примеры:

Немного реализации (выпадающее меню с единичным выбором):

И ещё немного (не выпадающее меню с множественным выбором):
Бонус: не знаю, зачем я это сделал, но… выпадающее меню с единичным выбором и работающим на CSS сбросом заголовка:

Зачем это нужно?

В связи с тем, что судя по комментариям, не все понимают, для чего будет полезен данный код, считаю нужным дать некоторые разъяснения.

При стилизации выпадающих списков вида:

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

есть серьёзные ограничения стилизации. Поэтому их заменяют на простые списки:

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

которым с помощью JavaScript навешивают весь необходимый функционал.

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

Мало того, что необходимо реализовать весь основной функционал:

переключение пунктов и их взаимодействие
состояния (checked, disabled)
привязка к форме и отправка данных на сервер
инициализация исходных данных (автозаполнение)
сброс формы (при нажатии на кнопку «reset» список нужно вернуть в состояние при инициализации)

Фактически, если в JavaScript что-то ломается, не важно, из-за чего — скрипт не догрузился, возник баг, внесли правки — при возникновении любой проблемы выпадающий список превращается в… что-то, выглядящее как выпадающий список, но не работающее.
Вообще. Никак.

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

Для сервера это будет выглядеть ещё «веселее» — пришла форма, в которой не хватает части данных. Хорошо, что такую ситуацию заранее предусмотрели при разработке… Ведь предусмотрели, правда?

Плюсы получившегося решения:

Весь основной функционал (смотри выше), кроме сброса заголовка ВСЕГДА будет работать. Даже если у человека вообще отключён JavaScript (хоть это и стало практически неактуально). Единственное, что может пойти не так — нельзя будет открыть список. Но и в этом случае отправится значение по умолчанию, плюс смену состояний — список открыт/закрыт — можно реализовать прямо в коде html (защита от проблем с файлом JS), или вообще открывать по наведению.
Данного функционала достаточно для большинства подобных списков. Да, возникнут проблемы у людей, использующих дополнительный функционал (об этом ниже). Но в случае со списком на ul — li для работы и вовсе требуется библиотека, и много что может пойти не так.

Минусы (доп. функционал, который не реализован, и добавляется JavaScript’ом / библиотеками):

Переключение с помощью tab
Управление стрелками (в стандартном select можно менять выбранный пункт кнопками вверх-вниз)
Озвучка скринридерами (для людей, у которых проблемы со зрением текст на странице озвучивается)
Не работает как нативный select на мобильных (на мобильных select довольно удобно работает сам по себе. При желании можно определять устройство и подменять на стандартный select)
Список не умеет выпадать вверх, если снизу край вьюпорта (JS сделает это)
Группировка пунктов (аналог OptGroup) (сложно, и очень редко встречается)

Как видно, ничто из вышеперечисленных минусов не является критичным для подавляющего большинства списков, и при необходимости реализуется с помощью JavaScript, а потому…

Добро пожаловать в мир, где Ваши библиотеки для стилизации Select-Option-подобных списков станут чуточку меньше, а работа с этими списками без библиотек — почти комфортной!

UPD: как оказалось, в случае с чекбоксами атрибут required работает некорректно, и его также необходимо эмулировать с помощью JavaScript (на данный момент обязательными становятся все чекбоксы, отмеченные как required, и только они)

Список

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Предназначен для создания списка предложенных пунктов, из которого пользователь может выбрать один или несколько. Ограничивается тегами <select>…</select>.

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

autofocus

Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:

<select autofocus>...</select>
<select autofocus="">...</select>
<select autofocus="autofocus">...</select>

disabled

Блокирует выбор из списка. Значение можно задать тремя способами:

<select disabled>...</select>
<select disabled="">...</select>
<select disabled="disabled">...</select>

multiple

Позволяет выбрать несколько пунктов списка одновременно. Следует обратить внимание, что при множественном выборе в потоке данных от одной формы может присутствовать несколько переменных с одним и тем же именем. Ваша программа обработки должна предусматривать подобные ситуации и корректно их обрабатывать.

name

Имя списка. Обязательный атрибут.

required

Обязательно должен быть выбран пункт с непустым значением. Если это не выполнено, то браузер выведет сообщение, а форма на сервер отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может (не работает в IE и Safari).

size

Вертикальный размер окна списка. Если атрибут опущен или его значение равно 1, выводится всплывающий список пунктов. Если указано число больше 1, то пункты списка выводятся в окне с полосой прокрутки. Если значение атрибута больше, чем фактическое количество пунктов списка, то добавляются пустые пункты. При их выборе пользователем возвращаются пустые поля.

Для тега <select> также доступны общие атрибуты и атрибуты обработки событий.

Пункт списка <option>

Каждый пункт списка ограничивается тегами <option>…</option>. Закрывающий тег необязателен.

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

disabled: Блокирует выбор пункта списка.
label: Метка пункта списка. Если указан атрибут label, то в списке выводится его значение вместо текста внутри тега <option> (в Firefox не работает).
selected: Пункт списка, выбранный по умолчанию.
value: Значение, передаваемое сценарию в случае выбора пользователем определенного пункта. Если этот атрибут отсутствует, то в сценарий будет отослан текст, расположенный сразу после тега <option>.

Любые теги,помещенные внутри тега option, будут проигнорированы.

Для тега <option> также доступны общие атрибуты и атрибуты обработки событий.

Пример выпадающего списка

<form>
    <select name="s1">
        <option value="tea">Чай</option>
        <option value="coffee">Кофе</option>
        <option value="milk">Молоко</option>
        <option value="ham">Ветчина</option>
        <option value="cheese">Сыр</option>
    </select>
</form>

РЕЗУЛЬТАТ:

Чай Кофе Молоко Ветчина Сыр

Пример списка с множественным выбором

<form>
    <select name="s2" size="5" multiple>
        <option value ="tea">Чай</option>
        <option value ="coffee" selected>Кофе</option>
        <option value ="milk">Молоко</option>
        <option value ="ham">Ветчина</option>
        <option value ="cheese">Сыр</option>
    </select>
</form>

РЕЗУЛЬТАТ:

Чай Кофе Молоко Ветчина Сыр

Группа пунктов списка <optgroup>

Контейнер <optgroup>…</optgroup> позволяет группировать пункты списка. В этом случае названия каждой группы будут выделены жирным, а некоторые браузеры еще добавляют отступы, так что пользователю при выборе необходимого пункта ориентироваться гораздо проще.

Для тега <optgroup> доступны общие атрибуты и атрибуты обработки событий.

Пример группировки пунктов списка

<form>
    <select name="s3" size="10">
        <optgroup label="HTML">
            <option value="h4">HTML3.2</option>
            <option value="h5">HTML4.0</option>
            <option value="h5">HTML5</option>
        </optgroup>
        <optgroup label="CSS">
            <option value="css1">CSS1</option>
            <option value="css2">CSS2</option>
            <option value="css3">CSS3</option>
        </optgroup>
        <option value="js">JavaScript</option>
        <option value="dhtml">DHTML</option>
    </select>
</form>

РЕЗУЛЬТАТ:

HTML3.2 HTML4.0 HTML5 CSS1 CSS2 CSS3 JavaScript DHTML

Более того, для дополнительной наглядности каждую группу с помощью CSS можно раскрасить в свой цвет.

Пример выделения цветом групп пунктов списка

<form>
    <select name="s4" size="10">
        <optgroup label="HTML">
            <option value="h4">HTML3.2</option>
            <option value="h5">HTML4.0</option>
            <option value="h5">HTML5</option>
        </optgroup>
        <optgroup label="CSS">
            <option value="css1">CSS1</option>
            <option value="css2">CSS2</option>
            <option value="css3">CSS3</option>
        </optgroup>
        <option value="js">JavaScript</option>
        <option value="dhtml">DHTML</option>
    </select>
</form>

РЕЗУЛЬТАТ:

HTML3.2 HTML4.0 HTML5 CSS1 CSS2 CSS3 JavaScript DHTML

| HTML | WebReference

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

ЧебурашкаКрокодил ГенаШапоклякКрыса Лариса	Выберите герояЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Список множественного выбора	Раскрывающийся список

Синтаксис

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

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

Атрибуты

autofocus: Устанавливает, что список получает фокус после загрузки страницы.
disabled: Блокирует доступ и изменение элемента.
form: Связывает список с формой.
multiple: Позволяет одновременно выбирать сразу несколько элементов списка.
name: Имя элемента для отправки на сервер или обращения через скрипты.
required: Список обязателен для выбора перед отправкой формы.
size: Количество отображаемых строк списка.

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

Пример

<!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>

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

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Раскрывающийся список на HTML — тег SELECT — Формы — codebra
Первый раз на codebra.ru? Посмотри другие уроки по HTML и CSS!
Что такое раскрывающийся список?
Благодаря тегу <select> появилась возможность создания раскрывающего списка и списка с множественным выбором. Если вы собираетесь отправлять данные на сервер, то тег <select> должен быть помещен в форму (тег <form> ). Далее пример:
Код HTML
<form method = "POST"> <select size = "3" multiple name = "name[]"> <option disabled>Какие имена вам нравятся?</option> <option selected value = "Никакие">Никакие</option> <option value = "Иван">Иван</option> <option value = "Петр">Петр</option> <option value = "Николай">Николай</option> </select> <input type = "submit" value = "Ответить"> </form>
Какие есть атрибуты у тега select?
Тег <select> имеет три полезных атрибута (остальные рассматривать не будем, про них уже я говорил). Первый атрибут multiple, благодаря нему можно сделать возможность выбора нескольких элементов списка. Чтобы выбирать несколько элементов, нужно зажать shift или ctr и наживать мышкой на нужные элементы. Далее пример применения атрибута multiple:
Код HTML
<form method = "POST"> <select size = "3" multiple name = "name[]"> <option disabled>Какие имена вам нравятся?</option> <option selected value = "Никакие">Никакие</option> <option value = "Иван">Иван</option> <option value = "Петр">Петр</option> <option value = "Николай">Николай</option> </select> <input type = "submit" value = "Ответить"> </form>
Второй атрибут required, с помощью его можно «сказать» браузеру, что список должен быть выбран перед отправкой формы, иначе браузер запретит отправлять форму, и выведет вам соответствующее сообщение. Вид этого сообщения зависит полностью от браузера и пользователь не может его изменять. Далее пример применения атрибута required:
Код HTML
<form method = "POST"> <select required size = "1" name = "name[]"> <option disabled>Да или нет?</option> <option value = "Да">Да</option> <option value = "Нет">Нет</option> </select> <input type = "submit" value = "Ответить"> </form>
Третий атрибут size, с помощью его можно указать количество отображаемых элементов списка. Атрибут size может содержать только целое число. Атрибут size трансформирует список, например, если он равен 1, то тег <select> отображается как «выпадающий список», а если атрибут size больше 1, то раскрывающийся список отображается как «список с прокруткой». Далее два примера применения атрибута size:
Код HTML
<form method = "POST"> <select required size = "1" name = "name[]"> <option disabled>Да или нет?</option> <option value = "Да">Да</option> <option value = "Нет">Нет</option> </select> <input type = "submit" value = "Ответить"> </form>
Код HTML
<form method = "POST"> <select required size = "3" name = "name[]"> <option disabled>Да или нет?</option> <option value = "Да">Да</option> <option value = "Нет">Нет</option> </select> <input type = "submit" value = "Ответить"> </form>
Атрибут list тега | HTML справочник
HTML тег <input>
Значение и применение
Атрибут list (HTML тега <input>) определяет список предопределенных вариантов, который будет предложен пользователю. Значение атрибута должно соответствовать идентификатору элемента <datalist>.
Поддержка браузерами
Синтаксис:
<input list = "datalist_id">
Значения атрибута
Значение Описание
datalist_id Значение атрибута должно соответствовать идентификатору элемента <datalist>.
Отличия HTML 4.01 от HTML 5
Атрибут считается новым в HTML 5.
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута list HTML тега <input>.</title> </head> <body> <form action = "#">  <fieldset>  <legend>Составление маршрута</legend>  Город отправления: <select>  <option label = "Владивосток"> <option label = "Анапа"> <option label = "Москва"> <option label = "Смоленск"> <option label = "Якутск"> </select> <p>Аэропорт назначения: <input type = "text" list = "airports">  </p> <datalist id = "airports">  <option value = "VVO" label = "Владивосток"> <option value = "MEM" label = "Анапа"> <option value = "VKO" label = "Москва Внуково"> <option value = "LNX" label = "Смоленск"> <option value = "YKS" label = "Якутск"> </datalist> <input type = "submit" value = "подтвердить">  </fieldset> </form> </body> </html>
В этом примере используются раскрывающийся список (<select>) и список предопределенных вариантов для ввода (<datalist>). Список предопределенных вариантов мы подключили атрибутом list внутри однострочного текстового поля (тег <input>).
Элементом списков выступает тег <option>. Если в списках используется атрибут label, то текст надписи, которая указывает значение параметра берется из него. Если значение атрибута label не указано, то этим значением выступает содержимое элемента <option>, при этом необходимо использовать закрывающий элемент </option>.
Обращаю Ваше внимание, что если в списке предопределённых вариантов (<datalist>) используется атрибут value, то поиск осуществляется по нему, если атрибут отсутствует, то по содержимому элемента, при этом необходимо использовать закрывающий элемент </option>.
Результат нашего примера:
Пример использования атрибута list HTML тега <input>. HTML тег <input>
Как создать раскрывающийся список в форме HTML5
Веб-дизайн и разработка
Разработка сайта
Как создать раскрывающийся список в форме HTML5
Автор Andy Harris
Выпадающие списки — обычная функция на веб-страницах, а HTML5 делает их довольно надежными. Выпадающие списки позволяют программисту указать ряд вариантов, которые посетители вашего сайта могут сделать без ввода (список показан на рисунке).Раскрывающиеся списки особенно хороши, потому что они не требуют много места на экране — параметры видны только тогда, когда пользователь выбирает их.
Раскрывающиеся списки имеют невероятно ценный атрибут в том, что они предотвращают определенные виды ошибок. Ограниченные параметры делают ответ очень предсказуемым, потому что вы заранее определяете все возможные ответы. Вам не нужно разбираться со всеми сумасшедшими вещами, которые пользователи могут вводить в текстовое поле.
В HTML5 / XHTML раскрывающиеся списки создаются двумя типами объектов.Общая структура использует теги
Список выбора — настоящая мощь, поэтому вы должны знать, как это сделать:
Сначала создайте элемент . Весь список заключен в пару используется для создания раскрывающегося списка.
Элемент определяют доступные параметры в выпадающий список.
Совет: Всегда добавляйте тег для лучшей практики доступности!
Поддержка браузера
Элемент
<выбрать> Да Да Да Да Да
атрибутов
Атрибут Значение Описание
автофокус автофокус Указывает, что раскрывающийся список должен автоматически получать фокус при загрузке страницы
инвалидов инвалидов Указывает, что раскрывающийся список должен быть отключен
форма form_id Определяет, какой форме выпадающий список принадлежит
кратный кратный Указывает, что одновременно можно выбрать несколько вариантов
имя имя Определяет имя для выпадающего списка
требуется требуется Указывает, что пользователь должен выбрать значение перед отправкой формы
размер номер Определяет количество видимых опций в раскрывающемся списке
глобальных атрибутов
Тег также поддерживает атрибуты событий в HTML.
Дополнительные примеры
Пример
Используйте
Имя *
Email *
Сайт

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

Input type выпадающий список: Элементы HTML форм — выпадающий список (теги select, option, optgroup), текстовое поле (textarea), а также применение label, fieldset и legend

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

Синтаксис

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

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

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

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

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

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

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

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

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

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

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

Поле со списком | htmlbook.ru

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

multiple

name

size

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

selected

value

label

Группирование элементов списка

Стилизация Select-Option (почти) без JavaScript / Хабр

Список

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

Пункт списка <option>

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

Пример выпадающего списка

Пример списка с множественным выбором

Группа пунктов списка <optgroup>

Пример группировки пунктов списка

Пример выделения цветом групп пунктов списка

| HTML | WebReference

Синтаксис

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

Атрибуты

Пример

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

Браузеры

Автор и редакторы

Что такое раскрывающийся список?

Какие есть атрибуты у тега select?

Атрибут list тега | HTML справочник

Значение и применение

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

Значения атрибута

Отличия HTML 4.01 от HTML 5

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

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

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

атрибутов

глобальных атрибутов

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

Пример

Рубрики

Рубрики