HTML <​form​>: тег для создания форм, его атрибуты, методы отправки данных

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

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

Содержание

• Что делает тег <form> и зачем он нужен
• Основные атрибуты тега <form>: action, method, enctype
• Элементы внутри формы: input, textarea, button, select
• Что происходит при отправке формы
• Валидация данных в HTML-формах
• Доступность форм для всех пользователей
• Как оформить форму с помощью CSS
• Примеры типичных форм
• Типичные ошибки при работе с формами
• Полезные советы и лайфхаки
• Полезные ссылки

Что делает тег <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> не отображается.

Основные атрибуты тега <form>: action, method, enctype

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

action — куда отправлять данные

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

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

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

method — каким способом отправлять

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

• 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:

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

enctype — как кодировать данные

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

<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>

Читайте также:

Директива <​!DOCTYPE​> в HTML: что это, зачем она нужна и как с ней работать

Элементы внутри формы: input, textarea, button, select

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

Поля ввода (<input>)

Это основной элемент формы. С его помощью пользователь вводит имя, пароль, 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>

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

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

Выпадающий список <select>

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

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

Кнопки <button> для управления формой

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

<!-- Кнопка отправки -->
<button type="submit">Отправить форму</button>

<!-- Кнопка сброса -->
<button type="reset">Очистить</button>

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

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

Что происходит при отправке формы

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

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

Читайте также:

Язык HTML: что это такое и как он работает

Валидация данных в HTML-формах

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

Встроенная валидация в HTML5

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

1. Обязательные поля — required

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

<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>

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

2. Проверка по типу — type

Атрибут 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>

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

3. Проверка по шаблону — pattern

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

<!-- Телефон в формате +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» вместо стандартного.

Доступность форм для всех пользователей

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

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

1. Подписи к полям (<label>)

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

<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" required>

2. Группировка связанных полей (<fieldset> и <legend>)

Если поля относятся к одной теме (например, личные данные), их лучше обернуть в <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>

3. Понятные подсказки и сообщения об ошибках

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

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

4. Навигация с помощью клавиатуры

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

Как стилизовать форму с помощью CSS

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; /* Прозрачность при наведении */
}

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

Читайте также:

Учимся верстать: что такое CSS

Примеры типичных форм

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

Форма обратной связи

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

<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>

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

Форма поиска

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

<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>

Форма авторизации

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

<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>

Форма загрузки файлов

Чаще всего встречается при отправке документов или резюме. С ней часто бывают сложности из-за нетипичных атрибутов 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>

Типичные ошибки при работе с формами

1. Нет атрибута name у поля

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

<!-- Ошибка -->
<input type="text" placeholder="Имя">

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

2. Неправильный метод отправки

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

3. Нет подписей у полей

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

4. Ошибки при загрузке файлов

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

Полезные советы и лайфхаки

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

1. Используйте правильные типы input.

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

2. Осторожнее с тегом <legend>.

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

3. Следите за порядком навигации.

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

Полезные ссылки

• MDN: Тег <form>