Знакомство с формами / «Мультиселект» [15/18]
×

«Мультиселект» [15/18]

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

Чтобы сделать это, нужно добавить к тегу <select> атрибут multiple.

Выбрать несколько вариантов можно, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на OS X.

Высоту мультиселекта можно изменять с помощью атрибута size тега <select>.

Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам <option> добавить атрибут selected.

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

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>«Мультиселект»</title> </head> <body> <h1>Анкета</h1> <form action="https://echo.htmlacademy.ru" method="post"> <p>В мультиселекте можно выбрать несколько вариантов, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на OS X.</p> <p><i>Любимые дни недели:</i></p> <select name="days"> <option>Понедельник</option> <option>Вторник</option> <option>Среда</option> <option>Четверг</option> <option>Пятница</option> <option>Суббота</option> <option>Воскресенье</option> </select> <input type="submit" value="Отправить"> </form> </body> </html>
CSS
input[type="submit"] { display: block; margin-top: 10px; }
HTML Academy
  1. Сделайте раскрывающийся список мультиселектом.
  2. Увеличьте его размер до 7.
  3. Сделайте, чтобы по умолчанию было отмечено воскресенье.

Попробуйте отправить форму, когда выбрано несколько вариантов.

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

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

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

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

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