Элемент <select> создает раскрывающееся меню, из которого пользователь может выбрать пункт.
<select name="">
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
<option value="4">Четыре</option>
</select>
Вы можете изменить количество отображаемых пунктов меню с помощью атрибута size. Значение этого атрибута равное 0 или 1 отображает стандартное раскрывающийся список. Если же атрибутsize превышает 1, то список отображается как поле, отображающее несколько строк, с одним значением на строку и полосой прокрутки для выбора доступных пунктов.
<select name="" size="3"></select>По умолчанию пользователи могут выбирать только одно значение. Добавление атрибута multiple позволяет пользователям одновременно выбирать несколько элементов списка и отправлять все выбранные значения в форме. Использование атрибута multiple автоматически преобразует раскрывающийся список в поле, как если бы он имел определенный размер. Размер по умолчанию этого поля определяется конкретным браузером, который вы используете, и его невозможно вернуть в в вид обычного раскрывающегося списка.
<select name="" multiple></select>При использовании атрибута multiple существует разница между использованием значений 0 и 1 для атрибута size. Использование 0 приведет к тому, что браузер будет вести себя по умолчанию, как будто атрибута size вообще нет. Использование значения равного 1 будет явно задавать размер получаемого поля только в одну строку.
Элементы option внутри элемента select - это те пункты списка, из которых пользователь будет выбирать. Стандартный синтаксис для элемента option выглядит следующим образом:
<option>Выбери меня</option>Однако важно отметить, что текст внутри самого элемента <option> не всегда используется, и по существу становится значением по умолчанию для атрибутов, которые не указаны.
На самом деле внешним видом и передоваемым значением на сервер являются соответственно атрибуты label и value. Атрибут label представляет собой текст, который будет отображаться в раскрывающемся меню (видимый пункт, который вы выбираете из списка). Атрибут value - это текст, который будет отправлен вместе с отправкой формы. Если одно из этих значений опущено, то вместо него использует текст внутри элемента как значение. Таким образом, приведенный выше пример может быть «расширен»:
<option label="Пункт 1" value="1">Выбери меня</option>
<option label="Пункт 2" value="2">Обратите внимание на отсутствие внутреннего текста и конечного тега, которые не требуются для фактического создания пункта списка. Если они будут включены, то внутренний текст будет проигнорирован, потому что оба атрибута указаны и текст не нужен. Тем не менее большинство пишут иным образом:
<option value="1">Пункт 1</option>
<option value="2">Пункт 1</option>Вы также можете указать определенный пункт, которая будет выбран в списке по умолчанию, добавив ему атрибут selected. По умолчанию, если в списке ни помечен ни один пункт атрибутом selected, то при отображении будет отображаться первый пункт. Если несколько пунктов имеют атрибут selected, то последний пункт с атрибутом selected будет выбран по умолчанию.
<option value="2" selected>Два</option>Если вы используете атрибут selected в многовариантном списке, то по умолчанию будут выбраны все пункты с этим атрибутом, и ни пункт не будет выбран, если все пункты не имеют этого атрибута.
<option value="1">Один</option>
<option selected value="2">Два</option>
<option value="3">Три</option>
<option selected value="4">Четыре</option>Вы можете группировать свои пункты в раскрывающимся списке, чтобы обеспечить более структурированный макет в длинном списке параметров, с помощью элемента <optgroup>.
Синтаксис очень простой, просто используя элемент с атрибутом label для идентификации заголовка для группы и содержащий ноль или более пунктов, которые должны быть внутри этой группы.
<select name="">
<option value="milk">Молоко</option>
<optgroup label="Фрукты">
<option value="banana">Бананы</option>
<option value="strawberry">Клубника</option>
</optgroup>
<optgroup label="Овощи" disabled>
<option value="carrot">Морковь</option>
<option value="zucchini">Цукини</option>
</optgroup>
</select>При использовании группировки пунктов не обязательно все их группировать. Кроме того, при отключении группы будут отключены все пункты внутри этой группы, и невозможно вручную включить один пункт в отключенной группе.
Элемент <datalist> указывает список пунктов для элемента . Он позволяет создать функцию автозаполнения для элементов . Пользователи будут видеть раскрывающийся список параметров по мере их записи.
Список, создаваемый элементом <datalist>, связывается с текстовым полем посредством атрибута id. Его значение должно совпадать со значением атрибута list элемента <input>.
<input list="Languages">
<datalist id="Languages">
<option value="PHP">
<option value="Perl">
<option value="Python">
<option value="Ruby">
<option value="C+">
</datalist>Но не все браузеры поддерживают данный элемент, например Safari.