HTML формы

1.

HTML
Формы

2.

Форма – это контейнер для диалога с пользователем.
Формы в HTML используются для сбора данных от
пользователей.
Например, когда мы заполняем регистрационные
формы, вводим логин и пароль или отправляем
сообщение через сайт, мы взаимодействуем с
HTML-формами.

3. Основные элементы формы

ОСНОВНЫЕ ЭЛЕМЕНТЫ ФОРМЫ
Форма создаётся с помощью тега <form>. Внутри
неё располагаются различные элементы ввода,
такие как текстовые поля, кнопки и чекбоксы.

4. Простейшая форма выглядит так:

ПРОСТЕЙШАЯ ФОРМА ВЫГЛЯДИТ ТАК:
<form>
<label for="name">Ваше имя:</label>
<input type="text" id="name" name="name">
<button type="submit">Отправить</button>
</form>

5. Разбор кода:

РАЗБОР КОДА:
<form> – контейнер для формы.
<label> – метка для поля ввода.
<input type="text"> – текстовое поле для ввода
имени.
<button type="submit"> – кнопка отправки формы.

6. Элемент <input>

ЭЛЕМЕНТ <INPUT>
<input >
Может отображаться несколькими способами. Все
зависит от атрибута type

7. Виды элементов формы (type)

ВИДЫ ЭЛЕМЕНТОВ ФОРМЫ (TYPE)
1. Текстовые поля text
<input type="text" name="username">
2. Пароль password
<input type="password" name="password">
3. Флажки (чекбоксы) checkbox
<input type="checkbox" name="agree"> Я согласен</input>

8. Виды элементов формы

ВИДЫ ЭЛЕМЕНТОВ ФОРМЫ
4. Переключатели (radio-кнопки)
<input type="radio" name="gender" value="male"> Мужской
<input type="radio" name="gender" value="female"> Женский
5. Кнопка отправки submit
<button type="submit">Отправить</button>

9. Виды элементов формы

ВИДЫ ЭЛЕМЕНТОВ ФОРМЫ
6. Выпадающий список select (option)
<select name="country">
<option value="ru">Россия</option>
<option value="us">США</option>
</select>

10. Виды элементов формы

ВИДЫ ЭЛЕМЕНТОВ ФОРМЫ
7. Многострочное текстовое поле (textarea)
<textarea>
(Наполнение)
</textarea>

11. Виды элементов формы

ВИДЫ ЭЛЕМЕНТОВ ФОРМЫ

12. Виды элементов формы

ВИДЫ ЭЛЕМЕНТОВ ФОРМЫ

13.

ПРАКТИКА

14.

Создайте форму для регистрации, которая
содержит:
• Поле для имени.
• Поле для электронной почты.
• Поле для пароля.
• Чекбокс "Согласен с условиями".
• Кнопку "Зарегистрироваться".

15.

16. Группирование элементов формы. (Создание рамки вокруг элементов)

ГРУППИРОВАНИЕ ЭЛЕМЕНТОВ ФОРМЫ.
(СОЗДАНИЕ РАМКИ ВОКРУГ
ЭЛЕМЕНТОВ)
<fieldset>
<legend>Заголовок</legend>
</fieldset>

17. Подсказывающий текст placeholder

ПОДСКАЗЫВАЮЩИЙ ТЕКСТ PLACEHOLDER
Везде где вводится текст можно использовать
подсказки для пользователя.
<input type="text" placeholder="">

18. Шаблон для ввода данных pattern=""

ШАБЛОН ДЛЯ ВВОДА ДАННЫХ
PATTERN=""
<input type="text" pattern=""> - в кавычках
указывается шаблон.

19.

20. Обязательное поле required

ОБЯЗАТЕЛЬНОЕ ПОЛЕ REQUIRED
<input type="text" required>

21.

ПРАКТИКА

22.

23. Задание 1

ЗАДАНИЕ 1
Форма опроса с обязательными полями
Создайте
форму-опрос,
где
пользователь
указывает имя, хобби, любимый цвет, возраст и
пишет о себе.

24. Задание 2

ЗАДАНИЕ 2
Форма входа
Создайте форму входа с полями логина и пароля.

25. Задание 3

ЗАДАНИЕ 3
Форма заказа пиццы
Реализовать форму заказа пиццы, где можно
выбрать размер, добавить начинки и ввести адрес
доставки.

26. Задание 4

ЗАДАНИЕ 4
Форма бронирования билетов
Создать форму выбора города и способа оплаты
для покупки билетов.

27. Задание 5

ЗАДАНИЕ 5
Форма обратной связи
с ограничением символов
Сделать форму обратной связи с ограничением 200
символов в поле сообщения.

28. Задание 6

ЗАДАНИЕ 6