HTML с нуля: HTML формы. Урок №18 Overcod.net

HTML с нуля: HTML формы. Урок №18

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

Где и как используются формы

Формы используются практически на каждом интерактивном сайте:

Регистрация и Авторизация: Поля для ввода логина, пароля, email.
Контактные формы: Сбор имени, email и сообщения пользователя.
Интернет-магазины: Корзина, оформление заказа, ввод платежных данных и адреса доставки.
Поиск: Поле для ввода поискового запроса.
Опросы и тесты: Сбор ответов на вопросы с различными вариантами выбора.
Загрузка файлов: Позволяют пользователю выбрать и отправить файл на сервер.

Основные теги для форм

Все элементы формы должны быть заключены в тег <form>.

Тег	Назначение
`<form>`	Определяет HTML-форму. Контейнер для всех элементов управления.
`<input>`	Самый распространенный тег для полей ввода. Его тип задается атрибутом `type`.
`<label>`	Создает подпись (метку) для элемента формы, улучшает доступность.
`<textarea>`	Определяет многострочное текстовое поле (для больших объемов текста).
`<select>`	Создает выпадающий список.
`<option>`	Определяет опцию (элемент) в выпадающем списке `<select>`.
`<button>`	Определяет кликабельную кнопку.
`<fieldset>`	Группирует связанные элементы в форме.
`<legend>`	Определяет заголовок для группы элементов внутри `<fieldset>`.

Важные атрибуты тега `<form>`

Атрибут	Значения	Описание
`action`	URL-адрес	Обязательный: Указывает адрес скрипта на сервере, куда будут отправлены данные формы после нажатия кнопки «Отправить».
`method`	`GET`, `POST`	Определяет HTTP-метод отправки данных: `GET` (данные передаются в URL, для поиска) или `POST` (данные в теле запроса, для регистрации, паролей). По умолчанию: `GET`.
`name`	текст	Уникальное имя формы (для обращения через JavaScript).
`autocomplete`	`on`, `off`	Включает/отключает автозаполнение полей браузером.
`enctype`	`application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`	Способ кодирования данных при отправке. `multipart/form-data` используется при загрузке файлов.

Основные типы полей `<input>` (Атрибут `type`)

Тег <input> является универсальным, его функциональность определяется атрибутом type.

type	Описание
`text`	Обычное однострочное текстовое поле. (По умолчанию, если `type` не указан)
`password`	Поле для пароля (символы скрыты).
`submit`	Кнопка для отправки формы.
`reset`	Кнопка для очистки (сброса) всех полей формы.
`button`	Обычная кликабельная кнопка (часто используется с JavaScript).
`checkbox`	Флажок (можно выбрать несколько).
`radio`	Переключатель (можно выбрать только один из группы).
`email`	Поле для ввода email-адреса (включает проверку формата).
`number`	Поле для ввода чисел (с возможностью задания `min` и `max`).
`file`	Кнопка для выбора файла для загрузки.
`hidden`	Скрытое поле (не отображается, используется для передачи технических данных).

Важные атрибуты полей `<input>`

Атрибут	Назначение
`name`	Обязательный: Имя поля, которое используется на сервере для идентификации полученных данных.
`value`	Значение поля по умолчанию или значение, которое будет отправлено на сервер (для `checkbox`, `radio`).
`placeholder`	Подсказка внутри пустого поля ввода.
`required`	Делает поле обязательным для заполнения перед отправкой.
`disabled`	Делает поле неактивным (нельзя редактировать и не отправляется).
`checked`	Используется для `checkbox` и `radio`, чтобы отметить его по умолчанию.

Пример кода формы

Создадим простую форму обратной связи, используя рассмотренные теги и атрибуты.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Урок 18: HTML Формы</title>
</head>
<body>

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

    <form action="/submit-form" method="POST"> 
        
        <fieldset>
            <legend>Личные данные</legend>
            
            <div>
                <label for="user_name">Ваше имя:</label><br>
                <input type="text" id="user_name" name="user_name" placeholder="Иван" required>
            </div>
            <br>
            
            <div>
                <label for="user_email">Email:</label><br>
                <input type="email" id="user_email" name="user_email" placeholder="example@domain.com" required>
            </div>
            <br>

            <div>
                <label for="user_pass">Пароль:</label><br>
                <input type="password" id="user_pass" name="user_pass" minlength="8" required>
            </div>
            <br>
        </fieldset>

        <div>
            <label for="message_topic">Тема сообщения:</label><br>
            <select id="message_topic" name="message_topic" required>
                <option value="" disabled selected>-- Выберите тему --</option>
                <option value="question">Вопрос по продукту</option>
                <option value="support">Техническая поддержка</option>
                <option value="suggestion">Предложение</option>
            </select>
        </div>
        <br>

        <div>
            <label for="message_text">Ваше сообщение:</label><br>
            <textarea id="message_text" name="message_text" rows="5" cols="40" placeholder="Введите ваше сообщение здесь..." required></textarea>
        </div>
        <br>
        
        <div>
            <input type="checkbox" id="agreement" name="agreement" required>
            <label for="agreement">Я согласен с условиями обработки данных</label>
        </div>
        <br>

        <div>
            <input type="submit" value="Отправить форму">
            <input type="reset" value="Очистить">
        </div>

    </form>

</body>
</html>

Это была основа работы с HTML-формами. Освоение этих элементов является ключевым шагом для создания интерактивных веб-страниц.

ДОПОЛНЕНИЕ — дополнительные поля и атрибуты HTML-форм

Дополнительные типы `<input>`

Эти типы полей позволяют расширить функциональность формы:

Специальные поля ввода

Выбор файла с компьютера

Выбор цвета

Выбор даты

Дата и время без часового пояса

Выбор месяца

Выбор времени

Выбор номера недели

Поле для ввода числа (с возможностью шагов)

Ползунок (slider)

Поле для поиска

Поле для телефона

Поле для URL-адреса