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

В приведенном выше примере показано типичное < select > использование. Ему присваивается id атрибут, позволяющий связать его с < label > для целей доступности, а также name атрибут, представляющий имя связанной точки данных, отправленной на сервер. Каждый пункт меню определяется < option > < /option > элементом, вложенным в файл < select > .

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

Элемент < select > имеет некоторые уникальные атрибуты, которые вы можете использовать для управления им, например, multiple чтобы указать, можно ли выбрать несколько параметров, и size указать, сколько параметров должно отображаться одновременно. Он также принимает большинство общих атрибутов ввода формы, таких как required, disabled, autofocus и т. д.

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

autocomplete - Подсказка DOMString для функции автозаполнения пользовательского агента . См . Атрибут автозаполнения HTML для получения полного списка значений и сведений о том, как использовать автозаполнение.

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

disabled - Этот логический атрибут указывает, что пользователь не может взаимодействовать с элементом управления. Если этот атрибут не указан, элемент управления наследует свои настройки от содержащего его элемента, например, < fieldset > если нет содержащего элемента с установленным disabled атрибутом, то элемент управления включен.

form - Элемент < form > , с которым необходимо связать < select > (владелец формы). Значение этого атрибута должно быть значением id a < form > в том же документе. (Если этот атрибут не установлен, < select > он связан со своим предком - < form > элементом, если он есть.)

Этот атрибут позволяет связать < select > элементы с < form > в любом месте документа, а не только внутри файла < form > . Он также может переопределить < form > элемент-предок.

multiple - Этот логический атрибут указывает, что в списке можно выбрать несколько параметров. Если он не указан, то одновременно может быть выбран только один вариант. Когда multiple указано, большинство браузеров будут отображать окно с прокруткой вместо выпадающего списка с одной строкой.

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

required - Логический атрибут, указывающий, что должен быть выбран параметр с непустым строковым значением.

size - Если элемент управления представлен в виде прокручиваемого списка (например, multiple , когда указано), этот атрибут представляет количество строк в списке, которые должны быть видны одновременно. Браузеры не обязаны представлять элемент выбора в виде прокручиваемого списка. Значение по умолчанию равно 0.