HTML-тег <form>

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

Тег <form> включает атрибуты, которые указывают, куда отправлять данные, используемый метод HTTP и способ кодирования данных.

Базовый синтаксис HTML-тега <form>

Базовая структура тега <form> :

<form action="URL" method="POST or GET">
    Form controls go here
</form>

Атрибут action указывает URL-адрес, по которому будут отправлены данные формы, а атрибут method определяет метод HTTP(обычно POST или GET ).

Атрибуты HTML-тега <form>

действие: указывает URL-адрес, на который будут отправлены данные формы.
Метод: определяет HTTP-метод, используемый для отправки формы. Возможные значения: <ul class="wp-block-list">
GET : Отправляет данные как параметры URL.
POST : Отправляет данные в теле запроса(более безопасно).

enctype: определяет, как должны быть закодированы данные формы при отправке. Возможные значения: <ul class="wp-block-list"> <li>


        application/x-www-form-urlencoded

: Кодировка по умолчанию.


        multipart/form-data

: Используется для загрузки файлов.


        text/plain

: Отправляет данные как обычный текст.

target: Указывает, где отображать ответ(например,


        _self


        _blank

автозаполнение: включает или отключает автозаполнение браузера(

on

или

off

novalidate: Отключает проверку HTML-форм.

Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как

id


        class


        style

Базовый пример HTML-тега <form>

Вот пример базовой формы, которая собирает имя и адрес электронной почты пользователя:

<!DOCTYPE html>
<html>
    <body>
        <h2>Basic Form Example</h2>
        <form action="/submit-form" method="POST">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name">



            <label for="email">Email:</label>
            <input type="email" id="email" name="email">



            <button type="submit">Submit</button>
        </form>
    </body>
</html>

Пояснение: Форма собирает имя и адрес электронной почты пользователя и отправляет данные в /submit-form с помощью метода POST .

Использование атрибута enctype формы

Атрибут enctype используется для загрузки файлов. Вот пример:

<!DOCTYPE html>
<html>
    <body>
        <h2>File Upload Form</h2>
        <form action="/upload" method="POST" enctype="multipart/form-data">
            <label for="file">Choose a file:</label>
            <input type="file" id="file" name="file">



            <button type="submit">Upload</button>
        </form>
    </body>
</html>

Пояснение: Эта форма позволяет пользователям загружать файл, который отправляется на сервер по адресу /upload .

Стилизация тега <form> с помощью CSS

Формы можно стилизовать с помощью CSS для улучшения внешнего вида и компоновки. Вот пример:

<!DOCTYPE html>
<html>
    <head>
        <style>
            form {
                background-color: #f9f9f9;
                padding: 20px;
                border: 1px solid #ccc;
                border-radius: 5px;
                max-width: 400px;
                margin: auto;
            }

            label {
                display: block;
                margin-bottom: 10px;
                font-weight: bold;
            }

            input {
                width: 100%;
                padding: 8px;
                margin-bottom: 15px;
                border: 1px solid #ccc;
                border-radius: 4px;
            }

            button {
                background-color: #007BFF;
                color: white;
                padding: 10px 15px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }

            button:hover {
                background-color: #0056b3;
            }
        </style>
    </head>
    <body>
        <h2>Styled Form</h2>
        <form action="/submit-form" method="POST">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username">

            <label for="password">Password:</label>
            <input type="password" id="password" name="password">

            <button type="submit">Login</button>
        </form>
    </body>
</html>

Оформление формы Тегирование с помощью CSS

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

Практическое применение тега <form>

Формы входа: собирают учетные данные пользователя, такие как имя пользователя и пароль.
Регистрационные формы: сбор информации от пользователей для создания учетных записей.
Формы обратной связи: позволяют пользователям отправлять комментарии, предложения или запросы.
Формы поиска: собирают поисковые запросы для обработки поисковой системой.
Загрузка файлов: позволяет пользователям загружать файлы, такие как изображения или документы.