Ссылки и формы

Цель: изучить теги, атрибуты и их значения для ссылок и форм, получить навыки создания и оформления форм.

Порядок выполнения лабораторной работы:

Изучить:
- варианты ссылок (mailto, tel), их атрибуты, состояния и стилизацию.
- теги для создания (form) и структурирования (fieldset, legend) форм, методы GET и POST.
- теги для создания полей ввода, множественного выбора, их атрибуты и значения.
- создание обязательных полей, их отключение и отключение кнопок.
- Статья по основам форм
Для выполнения работы необходимо в index.html:
- в index.html корректно сделать ссылки в соответствии с содержимым и создать и стилизовать формы в соответствии с графическим макетом.
- в index.html в навигацию добавить ссылку “Форма” на файл form.html.
В файл form.html:
- создать в папке проекта - form.html.
- в созданный документ скопировать header и footer из основного документа (index.html).
- footer прибить к нижней части области просмотра.
- переиспользовать стили от основной страницы.
В основную часть документа (main) form.html:
- создать форму регистрации нового пользователя со следующими полями:
- имя,
- дата рождения,
- пол,
- пароль,
- email,
- телефон,
- удобный интервал для связи (утро, день, вечер, ночь);
Требования к форме:
- использовать типы полей соответствующие вводимым данным, добавить placeholder’ы с образцами ввода данных и связанные ярлыки (label);
- часть полей сделать обязательными для заполнения, отметить это графически и текстом;
- поля формы объединить в две группы: личная информация и контактные данные;
- для отправки данных формы использовать метод POST;
- в качестве action использовать “//httpbin.org/post”;
- к форме добавить кнопки для отправки данных и ее сброса. В кнопках использовать текст и подходящие иконки;
Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на github.
Загрузить проект на хостинг.

Требования к html и css:

Страница должна соответствовать принципам адаптивной верстки:
- Не появляется горизонтальная полоса прокрутки.
- При изменении ширины экрана от 320px до 2560px макет адекватно перестраивается;
- Изображения адаптивны и изменяют свой размер;
- Текст читаем на любых устройствах.
Код html и css отформатирован;
Корректное использование тегов;
Корректно выбранные форматы изображений;
Отсутствие ошибок на валидаторе для html и css.