Лабораторная работа №2. Работа с формами

Автор: Богданов Тимофей Александрович.

Основа — копия страницы из ЛР1. Исходная ЛР1 сохранена без изменений.

Как открыть

Открыть index.html в браузере. Пункт «Обратная связь» ведёт к форме внизу страницы, пункт «Вход» открывает login.html. Установка программ и сборка не нужны.

Файлы

• index.html — страница из ЛР1 с добавленной формой обратной связи.
• login.html — форма входа по центру экрана.
• style.css — исходные стили ЛР1 и добавленное оформление форм.
• images/workspace.jpg — исходная фотография, также используется как фон страницы входа.

Шрифт Roboto подключён через Google Fonts. Для его загрузки нужен интернет. Фотография: Radek Grzybowski, Laptop on a desk, лицензия CC0 1.0.

Как устроены формы

• label подписывает поле и связывается с ним через for и id.
• name задаёт имя поля при отправке формы.
• required делает поле обязательным. Браузер проверяет заполнение и формат email.
• Одинаковый name="source" объединяет радиокнопки: выбрать можно один вариант.
• select — список типов обращения, textarea — большое поле сообщения.
• type="file" позволяет выбрать вложения, multiple — несколько файлов.
• enctype="multipart/form-data" нужен для отправки файлов.
• type="password" скрывает символы пароля.
• Чекбокс согласия обязателен, чекбокс «Запомнить меня» — нет.
• Flexbox центрирует форму входа, background-size: cover растягивает фон на весь экран с сохранением пропорций.

Это HTML/CSS-формы без серверной части, как требуется в задании. Данные, файлы и вход не обрабатываются и не сохраняются; «Запомнить меня» показывает выбор пользователя. Формы подготовлены для отправки методом POST на адрес из action. Чтобы действительно отправлять сообщения и выполнять вход, нужен серверный обработчик. При отправке заполненной формы на статическом сайте возможна ошибка неподдерживаемого POST-запроса.

Ссылки для сдачи

• Репозиторий: https://github.com/timmerow/web-lab2
• Сайт: https://timmerow.github.io/web-lab2/