Учебный вариант 00 — пара 14

Это постоянный пример преподавателя, который студентам не назначается. Задание пары 14: к главной и каталогу Variant00-web добавить form.html с шестью элементами, связанными подписями и отправкой GET. Данные формы и её исходные состояния приведены здесь целиком; главная и каталог остаются результатом пары 13.

Содержание главной страницы

Сохранение изображений: скачанные файлы называйте так, как указано в задании: 010-00-fridge.svg → fridge.svg, 010-00-washer.svg → washer.svg, 010-00-kettle.svg → kettle.svg. Сохраняйте их в своей папке images.

Элемент	Текст или изображение
Название приложения	Техника дома · V00
Заголовок главной	Бытовая техника для дома
Короткое пояснение	Выберите технику для повседневных дел
Описание	Три прибора для кухни и дома. Сравните характеристики и выберите нужный товар.
Основное изображение	`fridge.svg`
Название перехода к каталогу	Посмотреть технику
Название перехода к форме	Открыть форму заказа
Подпись в подвале	Учебный прототип · Вариант 00

На паре 13 главная сохраняет эти тексты, изображение и подпись. Ссылка «Посмотреть технику» ведёт на catalog.html; на паре 14 ссылка «Открыть форму заказа» ведёт на form.html.

Содержание каталога

Название — «Каталог техники». Пояснение — «Три товара с основными характеристиками».

№	Название	Характеристика	Описание	Файл изображения
1	Холодильник	300 л · 2 камеры	Для хранения свежих и замороженных продуктов	`fridge.svg`
2	Стиральная машина	7 кг · 1000 об/мин	Для стирки повседневной одежды	`washer.svg`
3	Электрочайник	1,7 л · 2000 Вт	Для быстрого нагрева воды	`kettle.svg`

Скопируйте SVG-файлы в папку images веб-проекта по инструкции занятия. Это нейтральные учебные иллюстрации без брендов, созданные для данного примера; рисовать их студентам не требуется.

Используйте все три позиции в указанном порядке. Каждая позиция — отдельный article с названием в h2, изображением с содержательным alt, характеристикой и описанием. Блоки идут сверху вниз. Каталог содержит переход на главную; на паре 14 добавляется переход к форме.

Страница формы

Название приложения — «Техника дома · V00», вкладка — «Форма — Техника дома · V00», единственный h1 — «Заказ техники». Под ним пояснение: «Учебная форма. Данные пока не сохраняются.» Подвал — «Учебный прототип · Вариант 00». Подключите прежний общий style.css.

Порядок	Видимая подпись	Элемент и постоянные данные
1	Товар	`select`: пустое приглашение «Выберите из списка», затем «Холодильник» (`fridge`), «Стиральная машина» (`washer`), «Электрочайник» (`kettle`); выбор обязателен, сначала пустой
2	Количество единиц	`input type="number"`: минимум 1, шаг 1, начальное значение 1, обязательно
3	Комментарий к заказу	Необязательный `textarea`, сначала пустой; подсказка «Например, удобный день доставки»
4	Нужна доставка	Независимый `checkbox`, выбран в начале
5	Нужна установка	Независимый `checkbox`, не выбран в начале
6	Срочность заказа	`input type="range"`: от 1 до 5, шаг 1, начальное значение 3; края «1 — Не срочно; 5 — Срочно»

Сохраните этот порядок. У каждого элемента свой id и совпадающий for у label; для передачи значений используйте имена item, quantity, notes, extra1, extra2, level соответственно. Значение выбранного флажка — yes. Кнопка после шести элементов — «Проверить заказ», тип submit; форма — <form method="get"> без внешнего action.

После формы ссылка «Назад» ведёт на index.html. На главной добавьте ссылку «Открыть форму заказа» → form.html. Меню на всех трёх страницах содержит по две ссылки только на другие страницы; состав указан в этапе 1 ниже.

Проверьте отказ при пустом товаре, пустом количестве, нуле и дроби. Затем выберите электрочайник, количество 3, оставьте комментарий пустым, доставку включённой, установку выключенной, срочность 3. После отправки ожидаются параметры item=kettle&quantity=3&notes=&extra1=yes&level=3; снятый extra2 не передаётся. GET показывает введённое в адресе, но не сохраняет и не обрабатывает заказ. Ниже — поэтапная сборка и самостоятельные испытания.

Вернуться к объяснению пары 14.