mirror of
https://github.com/EDeev/web-tech.git
synced 2026-06-16 21:21:08 +03:00
107 lines
7.3 KiB
Markdown
107 lines
7.3 KiB
Markdown
# Лабораторная работа №3. Работа с формами, HTTP
|
||
|
||
---
|
||
|
||
Создайте форму заказа. Форма должна отправляться на [https://httpbin.org/post](https://httpbin.org/post), на httpbin должны отобразиться все отправленные значения.
|
||
|
||
## Порядок выполнения
|
||
|
||
Форма должна располагаться на странице «Собрать ланч» после блока main (блока с информацией обо всех доступных для заказа блюдах). Примерный макет формы:
|
||
|
||
[Полный макет](https://lms.mospolytech.ru/pluginfile.php/1314120/mod_assign/intro/mockup_full.png) страницы.
|
||
|
||
### HTML
|
||
**Обязательные элементы**, которые должны быть на странице:
|
||
- Блок, состоящий из заголовка блока и формы
|
||
- Форма должна делиться на два блока:
|
||
- Блок с заказом клиента:
|
||
- заголовок блока
|
||
- label для каждого селекта
|
||
- селект для каждого блюда (суп, главное блюдо, напиток)
|
||
- label и многострочное текстовое поле для комментария
|
||
- Блок с данными клиента:
|
||
- заголовок блока
|
||
- label и поле для ввода имени
|
||
- label и поле для ввода email
|
||
- чекбокс и label для выражения согласия на получение информации (подписка на рассылку)
|
||
- label и поле для ввода телефона
|
||
- label и поле для ввода адреса
|
||
- переключатель для выбора времени доставки и подпись к переключателю
|
||
- label и поле для указания времени доставки
|
||
- кнопка сбросить
|
||
- кнопка отправить
|
||
|
||
Подробные требования к элементам блока с данными клиента:
|
||
|
||
|Элемент|Тип|Особенности|
|
||
|---|---|---|
|
||
|Комментарий (textarea)|-|-|
|
||
|Имя (input)|text|обязательное для заполнения|
|
||
|Email (input)|email|обязательное для заполнения|
|
||
|Чекбокс для подписки на рассылку (input)|checkbox|По умолчанию выбран (стоит галочка)|
|
||
|Телефон (input)|tel|обязательное для заполнения|
|
||
|Адрес (input)|text|обязательное для заполнения|
|
||
|Выбор времени доставки (input)|radio|обязательное для заполнения|
|
||
|Указание времени доставки (input)|time|минимальное время - 07:00 <br>максимальное время - 23:00 <br>шаг изменения времени - 5 минут|
|
||
|Кнопка сбросить (button)|reset|Кнопка должна полностью очищать форму|
|
||
|Кнопка отправить (button)|submit|Кнопка должна отравлять форму|
|
||
|
||
Форма должна отправляться методом POST на https://httpbin.org/post
|
||
На данной странице httpbin.org должны отобразиться все отправленные данные.
|
||
|
||
**Блок с заказом клиента**
|
||
|
||
У каждого селекта должна быть указана опция по умолчанию с пустым значением value (например, «Выберите суп»).
|
||
У всех остальных опций селектов должно быть указано значение value. Подберите логичное значение, чтобы при отправке данных его можно было верно понять. Например, для супа Гаспачо value может быть «gaspacho».
|
||
|
||
Все селекты обязательны для заполнения (форма не должна отправиться, пока в каждом селекте не будет выбрана опция с заполненным value).
|
||
|
||
Все label должны быть связаны с select, к которым они относятся.
|
||
|
||
**Блок с данными клиента**
|
||
|
||
Форма не должна отправляться, если хотя бы одно из обязательных полей не заполнено.
|
||
|
||
Все label должны быть связаны с input/textarea, к которым они относятся.
|
||
|
||
### CSS
|
||
|
||
Необходимо как можно точнее повторить [макет](https://lms.mospolytech.ru/mod/assign/view.php?id=539983#mockup_form) формы:
|
||
- разделение на колонки
|
||
- размер шрифта для разных элементов
|
||
- ширина и высота полей ввода, селектов
|
||
- стилизация кнопок
|
||
|
||
Вы можете использовать дополнительные HTML-элементы и CSS-свойства на свое усмотрение.
|
||
|
||
### Требования
|
||
- Все требования из блока HTML должны быть выполнены.
|
||
- Все требования из блока CSS должны быть выполнены.
|
||
- Код должен быть валиден (не должно быть ошибок в валидаторе [https://validator.w3.org](https://validator.w3.org/)).
|
||
- Результат должен соответствовать макетам (количество блоков, структура их наполнения).
|
||
|
||
### Материалы для изучения
|
||
|
||
#### HTML
|
||
[Формы [Doka]](https://doka.guide/html/form/)
|
||
[input [Doka]](https://doka.guide/html/input/)
|
||
[input type="checkbox" [MDN]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)
|
||
[input type="radio" [MDN]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)
|
||
[input type="time" [MDN]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time)
|
||
[select [Doka]](https://doka.guide/html/select/)
|
||
[option [Doka]](https://doka.guide/html/option/)
|
||
[label [Doka]](https://doka.guide/html/label/)
|
||
[Атрибут for [Doka]](hhttps://doka.guide/html/for/)
|
||
[textarea [Doka]](https://doka.guide/html/textarea/)
|
||
[button [Doka]](https://doka.guide/html/button/)
|
||
[Атрибут placeholder [Doka]](https://doka.guide/html/placeholder/)
|
||
[Атрибут required [Doka]](https://doka.guide/html/required/)
|
||
#### CSS
|
||
[Стилизация форм [W3Schools]](https://www.w3schools.com/css/css_form.asp)
|
||
#### Сеть
|
||
[httpbin.org](https://httpbin.org/)
|
||
[Что такое URL-адрес? [MDN]](https://developer.mozilla.org/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)
|
||
[URL [Doka]](https://doka.guide/tools/url/)
|
||
[Обзор протокола HTTP [MDN]](https://developer.mozilla.org/ru/docs/Web/HTTP/Overview)
|
||
[Протокол HTTP [Doka]](https://doka.guide/tools/http-protocol/)
|
||
[Работа с сетью [Doka]](https://doka.guide/tools/network/)
|