HTML: Список
В различных формах пользователю часто приходится выбирать один из множества вариантов. Это могут быть категории, по которым мы хотим произвести поиск, выбор различных опций для поиска. Наиболее распространённым решением является использование выпадающих списков:
<p class="lead">Choose a category to search</p>
<form>
<select class="form-select">
<option>JS</option>
<option>PHP</option>
<option>Java</option>
<option>Racket</option>
<option>HTML</option>
<option>CSS</option>
</select>
</form>
Для создания такого выпадающего списка используется тег <select> с вложенными внутри него тегами <option>. Всё это похоже на создание обычных списков, где вместо ul/ol используется <select>, а вместо <li> используется <option>.
Часто первый пункт списка используется для заголовка всего выпадающего списка. В таком случае для него используют атрибут disabled, чтобы заблокировать его для выбора.
<form>
<select>
<option disabled>What course do you want to take?</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. Внутри формы создайте выпадающий список из трёх элементов.
Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект
Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник":
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи. В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в обратной связи нашего сообщества
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const form = query(document, 'form');
const select = form.querySelector('select');
const options = select.querySelectorAll('option');
expect(form).to.have.attr('action', '/people');
expect(select).to.be.visible;
expect(options).to.have.length(3);
});Решение учителя откроется через:
20:00
