HTML выпадающий список

Введение

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

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Создание элемента <select>

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

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

В приведенном выше коде создается простой элемент <select> с четырьмя вариантами: Volvo, Saab, Opel и Audi.

Добавление атрибутов к элементу <select>

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

A: Атрибут size

Атрибут size задает, сколько вариантов должно быть видимо одновременно. Вот пример:

<select size="3">
  <!-- по умолчанию видимы три варианта -->
  <option value="Amsterdam">Амстердам</option>
  <option value="Berlin">Берлин</option>
  <option value="Paris">Париж</option>
  <option value="Barcelona">Барселона</option>
  <option value="Madrid">Мадрид</option>
</select>

B: Атрибут Name

Атрибут Name присваивает имя элементу <select>. Вот пример:

<select name="city">
  <option value="Amsterdam">Амстердам</option>
  <option value="Berlin">Берлин</option>
  <option value="Paris">Париж</option>
  <option value="Barcelona">Барселона</option>
  <option value="Madrid">Мадрид</option>
</select>

C: Атрибут multiple

Атрибут multiple позволяет пользователям выбирать несколько вариантов одновременно. Вот пример:

<select multiple>
  <option value="red">Красный</option>
  <option value="green">Зеленый</option>
  <option value="blue">Синий</option>
</select>

Определение вариантов

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

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

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

Использование сгруппированных вариантов

Вы можете группировать варианты внутри тега <optgroup>. Это делает ваш элемент <select> более организованным и читаемым. Вот, как вы можете использовать сгруппированные варианты:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Создание значений по умолчанию

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

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option selected value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

В этом примере вариант "Opel" будет выбран по умолчанию.

Резюме

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