HTML <​form​>: тег для создания форм, его атрибуты, методы отправки данных
2026-02-21 04:04 Diff
https://skillbox.ru/media/code/html-form-teg-dlya-sozdaniya-form-ego-atributy-metody-otpravki-dannyh/

#статьи

  • 29 авг 2025
  • 0

Разбираем, что такое форма в HTML, как правильно её сделать, какие элементы и атрибуты в ней используются, смотрим типовые примеры реализации.

Иллюстрация: Polina Vari для Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

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

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

Содержание

За работу форм отвечает тег <form>. Он создаёт контейнер, в котором находятся все поля ввода, кнопки и другие элементы. Без него браузер не поймёт, что делать с введённой информацией.

Простейшая форма может быть такой:

<form action="/submit" method="post"> <label for="name">Ваше имя:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <button type="submit">Отправить</button> </form>

На странице будет видно только поля и кнопку, сам контейнер <form> не отобразится.

Вот так выглядит форма, код которой мы посмотрели выше. На странице видно только поля и кнопку, сам контейнер <form> не отображается.

Скриншот: Google Chrome / Skillbox Media

Чтобы форма знала, куда и как отправлять данные, с тегом <form> используют специальные атрибуты. Самые важные из них — action, method и enctype.

Здесь указывается адрес страницы или скрипта, который примет данные формы.

<form action="/send.php" method="post"> ... </form>

Если не указать action, форма отправится на ту же страницу, где находится.

Есть два основных метода:

  • get — данные добавляются прямо в адресную строку. Подходит для поиска и фильтров.
  • post — данные уходят «внутри» запроса, и в адресе их не видно. Используется для форм регистрации, входа и других форм с личной информацией.
<!-- GET-запрос --> <form action="/search" method="get"> <input type="text" name="query" placeholder="Поиск..."> <button type="submit">Найти</button> </form> <!-- POST-запрос --> <form action="/login" method="post"> <input type="text" name="username" placeholder="Логин"> <input type="password" name="password" placeholder="Пароль"> <button type="submit">Войти</button> </form>

Когда использовать get:

  • если данные не секретные,
  • если нужно поделиться ссылкой (например, результатами поиска),
  • если объём данных маленький.

Когда использовать post:

  • если данные конфиденциальны (логины, пароли, личная информация),
  • если форма большая (регистрация, заказ, загрузка файлов),
  • если нужна дополнительная безопасность.

Этот атрибут нужен, если в форме есть загрузка файлов.

<form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="document"> <button type="submit">Загрузить</button> </form>

Если файлов нет, про enctype можно не думать — браузер справится сам.

  • target — указывает, где открыть результат после отправки формы. Чаще всего это то же окно (_self), но можно и новое (_blank).
  • novalidate — отключает встроенную проверку формы. Используйте, если хотите проверять данные с помощью своего скрипта.
  • autocomplete — включает или выключает автозаполнение полей. Значения: on (включено) или off (выключено).

Пример формы со всеми атрибутами:

<form action="/submit" method="post" enctype="multipart/form-data" target="_blank" novalidate autocomplete="off"> </form>

Внутри тега <form> размещаются различные элементы управления для ввода данных.

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

<form action="/register" method="post"> <!-- Текстовое поле --> <input type="text" name="username" placeholder="Имя пользователя"> <!-- Поле для email --> <input type="email" name="email" placeholder="Email"> <!-- Поле для пароля --> <input type="password" name="password" placeholder="Пароль"> <!-- Чекбокс --> <input type="checkbox" name="agree" id="agree"> <label for="agree">Согласен с условиями</label> <!-- Радиокнопки --> <input type="radio" name="gender" value="male" id="male"> <label for="male">Мужской</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">Женский</label> </form>

Для текста большого объёма: комментариев, отзывов и тому подобного.

<textarea name="message" rows="5" cols="40" placeholder="Ваше сообщение"></textarea>

Позволяет выбрать один из заранее заданных вариантов.

<select name="country"> <option value="">Выберите страну</option> <option value="ru">Россия</option> <option value="ua">Украина</option> <option value="by">Беларусь</option> </select>

Управляют отправкой или очисткой формы.

<!-- Кнопка отправки --> <button type="submit">Отправить форму</button> <!-- Кнопка сброса --> <button type="reset">Очистить</button> <!-- Обычная кнопка для JavaScript --> <button type="button" onclick="doSomething()">Выполнить действие</button>

Главное правило: у каждого поля должен быть атрибут name. Без него данные не попадут на сервер.

Когда пользователь нажимает кнопку «Отправить», браузер выполняет несколько действий:

  • Собирает данные. Берутся все значения из полей, у которых есть атрибут name.
  • Кодирует данные. Информация преобразуется в нужный формат, заданный атрибутом enctype.
  • Формирует запрос. Используется метод, указанный в method, — GET или POST.
  • Отправляет запрос. Данные уходят по адресу из action.
  • Показывает ответ. Сервер возвращает результат — например, сообщение «Спасибо» или страницу с ошибкой.

Валидация — это проверка данных перед отправкой формы. Браузер может сам проверить, всё ли заполнено правильно, и сказать пользователю, если что-то не так.

HTML5 умеет проверять данные без единой строчки кода на JavaScript. Для этого у элементов формы есть специальные атрибуты.

Если поставить этот атрибут, пользователь не сможет отправить форму, пока поле пустое.

<form action="/contact" method="post"> <input type="text" name="name" required placeholder="Имя*"> <input type="email" name="email" required placeholder="Email*"> <textarea name="message" required placeholder="Сообщение*"></textarea> <button type="submit">Отправить</button> </form>

Если оставить поле пустым и нажать «Отправить», браузер покажет сообщение об ошибке.

Атрибут type задаёт допустимые типы данных.

<!-- Проверка email --> <input type="email" name="email" required> <!-- Проверка URL --> <input type="url" name="website" placeholder="https://example.com" required> <!-- Проверка числа --> <input type="number" name="age" min="18" max="100" required>

Если ввести, например, текст вместо числа, браузер не даст отправить форму и покажет подсказку.

Скриншот: Google Chrome / Skillbox Media

Этот атрибут позволяет задать правило в виде регулярного выражения.

<!-- Телефон в формате +71234567890 --> <input type="tel" name="phone" pattern="\+7\d{10}" placeholder="+71234567890" title="Формат: +71234567890"> <!-- Пароль: минимум 8 символов, буквы и цифры --> <input type="password" name="password" pattern="(?=.*\d)(?=.*[a-z]).{8,}" title="Минимум 8 символов, должны быть буквы и цифры">

Если данные не соответствуют правилу, форма не отправится, а браузер покажет текст из атрибута title.

Стандартной проверки иногда недостаточно. Например, если нужно выводить свои сообщения об ошибках или проверять данные по более сложным правилам. В этих случаях используют JavaScript.

Пример:

<form id="myForm"> <input type="email" id="email" name="email" required> <button type="submit">Отправить</button> </form> <script> const emailField = document.getElementById('email'); emailField.addEventListener('invalid', function() { this.setCustomValidity('Пожалуйста, введите корректный email'); }); emailField.addEventListener('input', function() { this.setCustomValidity(''); // Очищаем сообщение, если пользователь исправил ошибку }); </script>

Теперь при неверном вводе браузер покажет сообщение «Пожалуйста, введите корректный email» вместо стандартного.

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

Вот несколько вещей, на которые нужно обратить внимание, чтобы сделать форму доступной.

Каждое поле должно иметь понятную подпись. Лучше связывать подпись с полем с помощью атрибутов for и id. Так проще попасть в поле: можно просто кликнуть по лейблу, и курсор сам перейдёт в нужное поле.

<label for="username">Имя пользователя:</label> <input type="text" id="username" name="username" required>Скриншот: Google Chrome / Skillbox Media

Если поля относятся к одной теме (например, личные данные), их лучше обернуть в <fieldset>. Внутри можно добавить заголовок <legend>.

<fieldset> <legend>Личная информация</legend> <label for="firstName">Имя:</label> <input type="text" id="firstName" name="firstName"> <label for="lastName">Фамилия:</label> <input type="text" id="lastName" name="lastName"> </fieldset>

Если нужно пояснить, что именно вводить, используйте дополнительный текст. Его можно связать с полем через aria-describedby.

<label for="cardNumber">Номер карты:</label> <input type="text" id="cardNumber" name="cardNumber" aria-describedby="cardHelp" maxlength="19"> <div id="cardHelp">Введите 16 цифр без пробелов</div>

Переход по клавише Tab должен идти по полям в правильном порядке. Избегайте лишнего tabindex, если в нём нет особой необходимости.

CSS позволяет делать формы красивыми и приводить их к общему стилю сайта. Давайте стилизуем вот эту форму:

<form action="/contact" method="post"> <input type="text" name="name" required placeholder="Имя*"> <input type="email" name="email" required placeholder="Email*"> <textarea name="message" required placeholder="Сообщение*"></textarea> <button type="submit">Отправить</button> </form>

Добавим к ней вот такие стили:

form { max-width: 420px; /* Ограничение формы по ширине */ margin: 0 auto; /* Выравнивание формы по центру */ padding: 20px; /* Внутренние отступы */ border: 1px solid #ccc; /* Обводка */ border-radius: 5px; /* Скругление */ } input, textarea, button { width: 100%; /* Ширина полей */ padding: 10px; /* Внутренние отступы */ margin: 0 0 10px; /* Отступы между полями */ border: 1px solid #ccc; /* Обводка */ border-radius: 5px; /* Скругление */ } textarea { height: 150px; /* Высота поля */ resize: none; /* Запрет на изменение ширины и высоты пользователем */ } button { background-color: #4cf50; /* Фоновый цвет */ color: #ffffff; /* Цвет текста */ cursor: pointer; /* Курсор в виде пальца */ } button:hover { opacity: 0.8; /* Прозрачность при наведении */ }

В итоге форма будет выглядеть вот так:

Скриншот: Google Chrome / Skillbox Media

Самые популярные формы на сайтах — это форма обратной связи, форма поиска и форма авторизации. Давайте напишем для них код. Стили мы используем те же, что и в прошлом разделе.

Позволяет оставить сообщение администратору или службе поддержки.

<form action="/contact" method="post"> <label for="contactName">Ваше имя:</label> <input type="text" id="contactName" name="name" required> <label for="contactEmail">Email:</label> <input type="email" id="contactEmail" name="email" required> <label for="contactSubject">Тема сообщения:</label> <select id="contactSubject" name="subject" required> <option value="">Выберите тему</option> <option value="support">Техническая поддержка</option> <option value="sales">Продажи</option> <option value="other">Другое</option> </select> <label for="contactMessage">Сообщение:</label> <textarea id="contactMessage" name="message" rows="5" required></textarea> <button type="submit">Отправить сообщение</button> </form>

Вот так будет выглядеть форма в итоге:

Скриншот: Google Chrome / Skillbox Media

Нужна, чтобы быстро находить информацию на сайте.

<form action="/search" method="get" role="search"> <label for="searchQuery" class="visually-hidden">Поиск по сайту:</label> <input type="search" id="searchQuery" name="q" placeholder="Что вы ищете?" required> <button type="submit">Найти</button> </form>Скриншот: Google Chrome / Skillbox Media

Используется для входа в личный кабинет.

<form action="/login" method="post"> <label for="username">Логин:</label> <input type="text" id="username" name="username" required> <label for="password">Пароль:</label> <input type="password" id="password" name="password" required> <button type="submit">Войти</button> </form>Скриншот: Google Chrome / Skillbox Media

Чаще всего встречается при отправке документов или резюме. С ней часто бывают сложности из-за нетипичных атрибутов enctype у формы и accept у поля.

<form action="/upload" method="post" enctype="multipart/form-data"> <label for="fileUpload">Выберите файл:</label> <input type="file" id="fileUpload" name="document" accept=".pdf,.doc,.docx" required> <label for="fileDescription">Описание файла:</label> <textarea id="fileDescription" name="description" rows="3"></textarea> <button type="submit">Загрузить файл</button> </form>Скриншот: Google Chrome / Skillbox Media

Без name данные не попадут на сервер.

<!-- Ошибка --> <input type="text" placeholder="Имя"> <!-- Правильно --> <input type="text" name="name" placeholder="Имя">

Использовать GET для паролей или личных данных небезопасно: они попадут в адресную строку. Для таких случаев нужен POST.

Если <label> не связан с полем, скринридеры не смогут озвучить его корректно. Это сильно мешает пользователям с ограниченными возможностями здоровья.

Если форма загружает файлы, но нет атрибута enctype="multipart/form-data", файлы не отправятся.

Есть несколько приёмов, которые помогут сделать формы удобнее и надёжнее.

HTML5 поддерживает много типов: email, tel, url, date, color, range и другие. Они помогают браузеру проверять данные и дают пользователю удобный интерфейс. Например, на телефоне при type="tel" сразу появляется клавиатура с цифрами.

Он нужен для описания группы полей в <fieldset>, но плохо стилизуется. Если нужно оформить заголовок красиво, можно оставить <legend> для доступности (и скрыть его с помощью класса visually-hidden), а видимый текст сделать обычным заголовком или абзацем.

Если используете tabindex, убедитесь, что переход по клавише Tab остаётся логичным. Слишком сложный порядок запутает пользователей.

Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше