Знакомство с формами / Раскрывающийся список или «селект» [14/18]
×

Раскрывающийся список или «селект» [14/18]

Раскрывающийся список так же, как и переключатель, позволяет выбрать один вариант ответа из нескольких.

Раскрывающийся список создаётся с помощью парного тега <select>, у которого есть знакомые атрибуты name и id.

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

<select name="theme">
  <option value="light">Светлая тема</option>
  <option value="dark">Тёмная тема</option>
  ...
</select>

В атрибуте value тега <option> задаётся значение варианта ответа, а внутри этого тега располагается подпись варианта ответа.

Если при отправке формы у выбранного варианта задан value, то на сервер отправится значение этого атрибута. В противном случае будет отправлен текст подписи.

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Раскрывающийся список или «селект»</title> </head> <body> <h1>Анкета</h1> <form action="https://echo.htmlacademy.ru" method="post"> <p>Часто выпадающие списки используют для выбора даты.</p> <p><i>Ваш год рождения</i></p> <!-- добавьте селект сюда --> <input type="submit" value="Отправить"> </form> </body> </html>
CSS
input[type="submit"] { display: block; margin-top: 10px; }
HTML Academy
  1. Добавьте в форму раскрывающийся список с именем year.
  2. Добавьте в этот список вариант со значением 2000 и подписью 2000 год.
  3. И второй вариант со значением 2001 и подписью 2001 год.

Попробуйте отправить форму.

Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.