Формы

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

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

Теория

1. Варианты ссылок (mailto, tel), их атрибуты, состояния и стилизацию;
2. Информацию о формах:
   • теги для создания форм (form) и структурирования (fieldset, legend) форм;
   • методы GET и POST;
   • теги для создания полей ввода (label, input), множественного выбора (select), их атрибуты (name, value) и значения;
   • создание обязательных полей, их отключение и отключение кнопок;
3. Псевдоклассы и псевдоэлементы.
4. Свойства transition и transform.

Практика

1. В index.html в ссылки с почтой/телефоном в href добавьте mailto:, tel:.

2. Создать в папке проекта новый документ - form.html. В header index.html должна быть работающая ссылка на form.html.

3. В созданный документ скопировать header и footer из основного документа (index.html).

4. В header form.html должна быть работающая ссылка на index.html.

5. Footer “прижать” к нижней части области просмотра. Способы реализации в заметке “A Clever Sticky Footer Technique”

6. В основной части сайта (main) создать форму регистрации нового пользователя со следующими полями:

   • имя,
   • дата рождения,
   • пол,
   • пароль,
   • email,
   • телефон,
   • удобный интервал для связи (утро, день, вечер, ночь);

7. Использовать типы полей соответствующие вводимым данным, добавить placeholder’ы с образцами ввода данных и связанные ярлыки (label). Ярлыки не скрывать и поля должны находится на следующей строке после ярлыка.

8. Часть полей сделать обязательными для заполнения;

9. Поля формы объединить в две группы: личная информация и контактные данные;

10. Для отправки данных формы создать ее таким образом, чтобы она отправляла данные на netlify. Документация <form name="contact" method="POST" data-netlify="true">.

11. К форме добавить кнопки для отправки данных и ее сброса. В кнопках использовать текст и подходящие иконки. Иконки можно взять с Google fonts.

12. Для ссылок и кнопок создать стили с псевдоклассами hover, active, focus. Изменения стилей должны происходить плавно с помощью переходов (transition). Можно их поворачивать (rotate), смещать (translate), увеличивать (scale) с помощью transform и менять цвета.

13. Измените стили для полей, которые находятся в фокусе.

14. Стилизовать выделение на странице ::selection

15. Стилизовать подсказки в форме с помощью ::placeholder

Результаты выполнения лабораторной работы:

Статическая веб-страница на хостинге, со структурой, которая соответствует требованиям и сохранена в системе контроля версий.

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

• Удобочитаемый код (Руководство по оформлению HTML/CSS кода от Google);
• Корректное использование тегов.
• Отсутствие ошибок на валидаторе для html и css;

Дополнительные источники

• Псевдоклассы
• Псевдоэлементы
• CSS transitions
• <form> на doka.guide
• A Clever Sticky Footer Technique
• MDN: создание форм
• Learn Forms
• Building Forms
• Моя демка на CodePen: Форма

Вопросы для защиты

1. Принципы работы http
2. Методы get и post
3. Назовите примеры типов полей формы
4. Для чего нужны атрибуты name, value, require, disabled
5. Примеры использования fieldset, legend
6. В каких состояниях могут находится ссылки/кнопки?
7. Что такое псевдокласс? Примеры
8. Что такое псевдоэлемент? Примеры
9. Какие есть обязательные и необязательные свойства для переходов?