HTML выпадающий список: примеры, руководство и кодировка

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

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

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

<select>
  <option value="1">Вариант 1</option>
  <option value="2">Вариант 2</option>
  <option value="3">Вариант 3</option>
  <option value="4">Вариант 4</option>
</select>

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

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

<select>
  <option value="1">Вариант 1</option>
  <option value="2" selected>Вариант 2</option>
  <option value="3">Вариант 3</option>
  <option value="4">Вариант 4</option>
</select>

Теперь "Вариант 2" будет выбран по умолчанию при открытии выпадающего списка.

Еще одна полезная возможность – вложенные выпадающие списки. В этом случае внутри элемента <option> мы создаем другой элемент <select>:

<select>
  <option value="1">Вариант 1</option>
  <option value="2">Вариант 2</option>
  <optgroup label="Группа 1">
    <option value="3">Подвариант 1</option>
    <option value="4">Подвариант 2</option>
  </optgroup>
</select>

Здесь у нас есть опция "Группа 1" с двумя вариантами выбора – "Подвариант 1" и "Подвариант 2". При выборе опции "Группа 1" открывается вложенный выпадающий список с подвариантами.

Настройка внешнего вида выпадающего списка возможна с помощью CSS. Например, вы можете изменить цвет фона, шрифт или размер элементов выпадающего списка.

Ниже приведен пример, который добавляет стили к нашему выпадающему списку:

<style>
  select {
    background-color: #f2f2f2;
    color: black;
    font-size: 16px;
    padding: 5px;
  }
</style>

<select>
  <option value="1">Вариант 1</option>
  <option value="2">Вариант 2</option>
  <option value="3">Вариант 3</option>
  <option value="4">Вариант 4</option>
</select>

В этом примере мы задали серый фон, черный цвет текста, размер шрифта 16 пикселей и небольший внутренний отступ.

Выводит на экран:

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