HTML
Элементы меню выбора

Синтаксис

• <select name=""></select>
• <datalist id=""></datalist>
• <optgroup label="Option Group"></optgroup>
• <option value="">Option</option>

Выберите Меню

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

<select name="">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

Изменение размера

Вы можете изменить размер меню выбора с помощью атрибута size . Размер 0 или 1 отображает стандартное меню стиля раскрывающегося списка. Размер, превышающий 1, преобразует раскрывающийся список в поле, отображающее много строк, с одним параметром на строку и полосой прокрутки для прокрутки доступных параметров.

<select name="" size="4"></select>

Многофункциональные меню выбора

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

<select name="" multiple></select>

При использовании multiple атрибута существует разница между использованием 0 и 1 для размера, тогда как разница не существует, если не используется атрибут. Использование 0 приведет к тому, что браузер будет вести себя так, как это было запрограммировано по умолчанию. Использование 1 будет явно задавать размер получаемого окна только на одну строку.

Группы вариантов

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

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

<select name="">
  <option value="milk">Milk</option>
  <optgroup label="Fruits">
    <option value="banana">Bananas</option>
    <option value="strawberry">Strawberries</option>
  </optgroup>
  <optgroup label="Vegetables" disabled>
    <option value="carrot">Carrots</option>
    <option value="zucchini">Zucchini</option>
  </optgroup>
</select>

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

Опции

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

<option>Some Option</option>

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

Атрибутами, которые управляют фактическим внешним видом и функцией опции, являются value и label . Метка представляет текст, который будет отображаться в раскрывающемся меню (на что вы смотрите и нажмете, чтобы выбрать его). Значение представляет текст, который будет отправлен вместе с отправкой формы. Если одно из этих значений опущено, оно вместо этого использует текст внутри элемента как значение. Таким образом, приведенный выше пример может быть «расширен»:

<option label="Some Option" value="Some Option">

Обратите внимание на отсутствие внутреннего текста и конечного тега, которые не требуются для фактического создания опции внутри меню. Если они были включены, внутренний текст будет проигнорирован, потому что оба атрибута уже указаны и текст не нужен. Тем не менее, вы, вероятно, не увидите много людей, которые пишут их таким образом. Наиболее распространенным способом написания является значение, которое будет отправлено на сервер вместе с внутренним текстом, который в конечном итоге станет атрибутом метки, например:

<option value="option1">Some Option</option>

Выбор опции по умолчанию

Вы также можете указать определенную опцию, которая будет выбрана в меню по умолчанию, добавив к ней selected атрибут. По умолчанию, если в меню не указан параметр, выбранный в меню, первый параметр в меню будет выбран при визуализации. Если несколько атрибутов имеют selected атрибут, то последний параметр, присутствующий в меню с атрибутом, будет выбран по умолчанию.

<option value="option1" selected>Some option</option>

Если вы используете атрибут в меню выбора нескольких опций, то по умолчанию будут выбраны все параметры с атрибутом, и ни один из них не будет выбран, если параметры не имеют атрибута.

<select multiple>
  <option value="option1" selected>Some option</option>
  <option value="option2" selected>Some option</option>   
</select>

DataList

Тег <datalist> указывает список предварительно определенных параметров для элемента <input> . Он предоставляет функцию автозаполнения для элементов <input> . Пользователи будут видеть раскрывающийся список параметров по мере их записи.

<input list="Languages">

<datalist id="Languages">
  <option value="PHP">
  <option value="Perl">
  <option value="Python">
  <option value="Ruby">
  <option value="C+">
</datalist>

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