Лабораторная работа: Построение форм, мини-макетов

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

Критерии оценивания:

• Умеет применять теги для построения форм.
• Создает структурированные формы с использованием различных типов полей ввода.
• Разрабатывает мини-макеты для пользовательских интерфейсов.

Ход работы:

1. Подготовительный этап:
   • Изучите теги HTML для создания форм:
     • <form>: контейнер формы.
     • <input>: поле ввода.
     • <textarea>: текстовое поле.
     • <select> и <option>: выпадающий список.
     • <button>: кнопки.
     • <label>: метка для элементов формы.
   • Ознакомьтесь с атрибутами тегов:
     • action, method для <form>.
     • type, name, placeholder, required для <input>.
2. Создание HTML-документа:
   • Откройте текстовый редактор (например, Visual Studio Code) и создайте новый файл с расширением .html.
   • Добавьте базовую структуру:

<!DOCTYPE html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

<title>Форма обратной связи</title>

</head>

<body>

<!— Контент формы —>

</body>

</html>

1. Создание формы:
   • Добавьте контейнер <form>:

<form action=»/submit» method=»post»>

<h2>Форма обратной связи</h2>

</form>

1. • Поле ввода текста:

<label for=»name»>Имя:</label>

<input type=»text» id=»name» name=»name» placeholder=»Введите ваше имя» required>

1. • Поле ввода email:

<label for=»email»>Email:</label>

<input type=»email» id=»email» name=»email» placeholder=»Введите ваш email» required>

1. • Текстовая область:

<label for=»message»>Сообщение:</label>

<textarea id=»message» name=»message» rows=»4″ placeholder=»Введите ваше сообщение»></textarea>

1. • Выпадающий список:

<label for=»topic»>Тема:</label>

<select id=»topic» name=»topic»>

<option value=»feedback»>Обратная связь</option>

<option value=»support»>Поддержка</option>

<option value=»other»>Другое</option>

</select>

1. • Кнопка отправки:

<button type=»submit»>Отправить</button>

1. Создание мини-макета:
   • Добавьте дополнительные элементы для структурирования формы:

<fieldset>

<legend>Контактная информация</legend>

<label for=»phone»>Телефон:</label>

<input type=»tel» id=»phone» name=»phone» placeholder=»Введите ваш номер телефона»>

</fieldset>

1. Оформление формы:
   • Убедитесь, что все поля подписаны с помощью <label>.
   • Проверьте использование атрибутов required для обязательных полей.
2. Проверка работы:
   • Сохраните файл и откройте его в браузере.
   • Проверьте корректность отображения формы и функциональность полей.
3. Оформление отчета:
   • Включите:
     • Код HTML-документа.
     • Скриншот результата в браузере.
     • Краткое описание созданной формы.

Пример задания:
Создайте форму для регистрации на мероприятие. Форма должна включать:

• Поле для ввода имени.
• Поле для email.
• Поле для выбора даты.
• Выпадающий список с выбором типа билета (обычный, VIP).
• Кнопку для отправки данных.

Советы:

• Используйте атрибуты placeholder для удобства ввода данных.
• Убедитесь, что форма адаптивна и корректно отображается на разных устройствах.
• Проверьте работу валидации обязательных полей.