Выпадающий список

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

В какой категории искать?

Для создания такого выпадающего списка используется тег select с вложенными внутри него тегами option. Всё это похоже на создание обычных списков, где вместе ul/ol используется select, а вместо li используется option. Также, часто, первый пункт списка используется для заголовка всего выпадающего списка. В таком случае для него используют атрибут disabled, чтобы заблокировать его для выбора.

<form>
    <select>
        <option disabled>Какой курс вы хотите пройти?</option>
        <option>JS</option>
        <option>PHP</option>
        <option>Java</option>
        <option>Racket</option>
        <option>HTML</option>
        <option>CSS</option>
    </select>
</form>

Выпадающий список также может быть представлен в виде списка, в котором можно выбрать несколько элементов. Делается это с помощью зажатия кнопки ctrl и клика мышки по полям, которые мы хотим выбрать.

В какой категории искать?

Для того, чтобы создать список с множественным выбор, у тега select добавляется атрибут multiple

<form>
    <select multiple>
          <option>JS</option>
          <option>PHP</option>
          <option>Java</option>
          <option>Racket</option>
          <option>HTML</option>
          <option>CSS</option>
    </select>
</form>

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте выпадающий список из трёх элементов.


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.