Создание раскрывающегося списка в HTML: примеры и инструкции
HTML раскрывающийся список (drop-down list) - это элемент формы, позволяющий пользователю выбрать один из предложенных вариантов. Раскрывающийся список состоит из кнопки (обычно называемой "выпадающий список" или "селектор") и списка элементов, которые отображаются при нажатии на эту кнопку.
Рассмотрим пример:
Этот код создает раскрывающийся список, который позволяет пользователю выбрать одну из четырех машин. Кнопка «Выберите машину» является текстовой меткой для списка, которая обеспечивает доступность. Атрибут "for" привязывает метку к элементу списка с помощью id="cars".
Элемент списка создается с помощью тега `. Обратите внимание, что каждый элемент списка имеет атрибут "value" с уникальным значением, которое будет отправлено на сервер, когда форма будет отправлена. Текст между тегами ` - это текст, который будет отображаться для пользователя в списке.
Раскрывающийся список можно настроить с помощью CSS, изменить его цвет, шрифт и т.д. Например:
select {
font-size: 16px;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #f2f2f2;
color: #333;
}
Этот код изменяет стиль нашего раскрывающегося списка. Он устанавливает размер шрифта, отступы, радиус границы, фон и цвет шрифта.
В целом, раскрывающийся список - это один из самых распространенных элементов формы, который мы встречаем во многих веб-приложениях и сайтах. Он довольно прост в использовании и настройке, позволяя пользователю выбирать один из ограниченного количества вариантов.