Формы в HTML: теги <form>, <input>, <label>, <textarea> и их атрибуты

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

Материал пригодится начинающим верстальщикам, фронтендерам и тем, кто собирает лендинги на конструкторах, но хочет понимать, как устроены поля ввода и отправка данных «под капотом».
Разберём четыре базовых тега: form, input, label, textarea. Покажу, какие атрибуты обязательны, как связать метку с полем и где новички чаще всего ошибаются. В конце — готовый пример, который можно скопировать и адаптировать под свой проект.

По данным MDN Web Docs (2024), формы в HTML поддерживаются всеми современными браузерами без ограничений — можно использовать любые атрибуты и типы полей.

Контейнер form и его атрибуты

Тег формы в HTML — это контейнер, который оборачивает все поля ввода. Без него браузер не поймёт, что данные нужно отправить на сервер. Внутри form размещаются текстовые поля, кнопки, чекбоксы и другие элементы.

Два главных атрибута определяют, куда и каким способом уйдут данные.

method и action — куда и как отправлять

Атрибут action указывает адрес серверного скрипта, который примет данные. Это может быть PHP-файл, endpoint API или URL стороннего сервиса. Если action не задан, форма отправится на текущую страницу.

Атрибут method задаёт способ передачи:

• GET — данные уходят прямо в URL после знака ?. Подходит для поиска и фильтров, где параметры можно сохранить в закладки. Ограничение — около 2000 символов.
• POST — данные передаются в теле запроса, не видны в адресной строке. Используйте для паролей, персональных данных и больших текстов.

Пример простейшей формы:

Когда пользователь нажмёт кнопку, браузер отправит POST-запрос на /send.php с параметром username.

❗ Это важно:

Вложенные формы (form внутри form) вызывают непредсказуемое поведение — браузеры их не поддерживают. Если нужно несколько форм на странице, размещайте их последовательно, а не друг в друге.

Поля ввода: тег input и типы

Тег input — рабочая лошадка любой формы. Это одиночный (непарный) тег, который создаёт текстовые поля, кнопки, чекбоксы, переключатели и другие элементы. Вид элемента зависит от атрибута type.

Атрибуты тега input определяют, как поле выглядит, что в него можно ввести и как данные попадут на сервер.

Атрибут	Назначение	Пример значения	Обязателен
name	Ключ, под которым данные уйдут на сервер	name=“email”	Да
type	Тип поля: текст, пароль, чекбокс и др.	type=“email”	Нет (по умолчанию text)
value	Значение по умолчанию или текст кнопки	value=“Отправить”	Нет
placeholder	Подсказка внутри пустого поля	placeholder=“Ваш email”	Нет
required	Поле обязательно для заполнения	required	Нет
maxlength	Максимальное число символов	maxlength=“100”	Нет

Без атрибута name браузер не отправит данные поля на сервер — это частая ошибка новичков.

Основные значения type

Атрибут type меняет поведение и внешний вид поля:

• text — обычное текстовое поле. Значение по умолчанию.
• email — поле для почты. Браузер проверит формат перед отправкой.
• password — символы скрыты точками или звёздочками.
• checkbox — флажок, можно выбрать несколько вариантов.
• radio — переключатель, выбирается только один из группы.
• submit — кнопка отправки формы. Текст задаётся через value.

Пример поля с валидацией:

Метки label — зачем и как связывать

Тег label — это подпись к полю ввода. Без него пользователь видит пустое поле и гадает, что туда вводить. Но главная ценность label — доступность. Скринридеры читают текст метки вместе с полем, и незрячий пользователь понимает, какие данные от него ждут.

Среди тегов в HTML для форм label часто недооценивают. А зря: он влияет и на UX, и на SEO, и на соответствие стандартам доступности.

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

Способ 1 — через атрибут for. Значение for должно совпадать с id поля. Способ 2 — вложением. Поле размещается внутри тега , и связь создаётся автоматически:

Оба варианта работают одинаково. Первый удобнее, когда метка и поле разнесены в вёрстке. Второй — компактнее для простых форм.

Сравните поведение формы без метки и с ней. Без клик по тексту «Email» ничего не делает. С меткой — курсор сразу встаёт в поле. На мобильных экранах это критично: область клика становится больше, пользователю проще попасть в нужный элемент.

💡 Это интересно:

Клик по тексту метки активирует связанное поле — удобно на мобильных экранах, где попасть в маленький чекбокс сложнее. Это стандартное поведение браузера, дополнительный код не нужен.

Многострочный ввод: тег textarea

Когда одной строки недостаточно — для комментариев, сообщений, описаний — используют тег textarea. В отличие от input, это парный тег: у него есть открывающая и закрывающая часть.

Размер поля задаётся двумя способами. Первый — через атрибуты rows и cols. Атрибут rows определяет высоту в строках, cols — ширину в символах. Второй способ — CSS-свойства width и height, которые дают больше гибкости в адаптивной вёрстке.

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

Текст по умолчанию размещается между открывающим и закрывающим тегами, а не в атрибуте value. Это частая путаница: у input значение задаётся через value, а у textarea — внутри тега:

< textarea name=“bio”>Здесь текст по умолчанию

Для валидации доступны те же атрибуты, что и у текстовых полей:

• required — поле обязательно для заполнения.
• minlength — минимальное число символов.
• maxlength — максимальное число символов.
• placeholder — подсказка, исчезает при вводе.

По умолчанию пользователь может изменять размер текстовой области, перетаскивая угол. Если это мешает дизайну, отключите через CSS: «resize: none;». Или ограничьте только вертикальное изменение: «resize: vertical;».

Встроенная валидация HTML5: проверяем данные без единой строчки JavaScript

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

Главное преимущество — вам не нужен JavaScript для базовой проверки. Это ускоряет разработку, уменьшает размер кода и работает даже если пользователь отключил скрипты.

Основные атрибуты валидации, которыми вы будете пользоваться в 90% случаев:

Пример формы с полной HTML5-валидацией:

Как кастомизировать сообщение об ошибке. По умолчанию браузеры показывают свои сообщения на языке пользователя. Если хотите свои тексты — добавьте атрибуты:

< input type=“email” required
⠀⠀⠀⠀
⠀⠀⠀⠀oninvalid=“this.setCustomValidity(‘Пожалуйста, введите настоящий e-mail адрес’)”

⠀⠀⠀⠀oninput=“this.setCustomValidity(’’)” >

Или более коротко и современно (2024–2025):

< input type=“tel” required pattern="+7[0-9]{10}"
⠀⠀⠀⠀
⠀⠀⠀⠀title=“Номер должен начинаться с +7 и содержать 11 цифр” >

Атрибут title автоматически используется браузером как текст всплывающей подсказки при ошибке.

Важные нюансы и ловушки:

1. Атрибут novalidate на form полностью отключает встроенную валидацию — удобно, когда проверяете только на сервере.
2. Если используете pattern, обязательно добавляйте title — иначе пользователь не поймёт, почему форма не отправляется.
3. Поле type=“number” не позволяет ввести буквы, но разрешает «e» (научная нотация). Если нужно строго целое число — используйте pattern="\d+".
4. Валидация срабатывает только при попытке отправить форму или при потере фокуса (в большинстве браузеров).

Частые ошибки при создании форм

При создании форм в HTML новички наступают на одни и те же грабли. Ниже — пять типичных проблем, которые ломают обработку данных или ухудшают доступность.

1. Нет атрибута name у полей. Без name браузер не включит поле в отправляемые данные. Форма уйдёт на сервер, но значение потеряется. Проверяйте каждый input и textarea — у всех должен быть name.
2. Label не связан с полем. Если у label нет атрибута for, а input не вложен внутрь метки — связь отсутствует. Скринридер не прочитает подпись, клик по тексту не активирует поле. Убедитесь, что значение for совпадает с id поля.
3. Значение textarea указано в атрибуте value. У textarea нет атрибута value. Текст по умолчанию размещается между открывающим и закрывающим тегами. Если написать < textarea value=“Текст” >, браузер проигнорирует атрибут, и поле останется пустым.
4. Вложенные формы. HTML не поддерживает form внутри другого form. Браузер проигнорирует внутреннюю форму, и часть полей не отправится. Если нужно несколько форм на странице — размещайте их последовательно, не вкладывая друг в друга.
5. Пропущены method и action. Без action форма отправится на текущий URL. Без method браузер использует GET — данные попадут в адресную строку. Для паролей и персональной информации это небезопасно. Всегда явно указывайте оба атрибута.

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

✅ Запомните:

Перед публикацией проверьте: у каждого поля есть name, каждый label связан с полем, а у формы указаны method и action.

Заключение

Для работающей формы достаточно четырёх тегов: form задаёт контейнер и адрес отправки, input и textarea создают поля ввода, а label связывает подписи с полями.

Главное — правильно расставить атрибуты. У контейнера укажите action и method. У каждого поля — name, иначе данные не дойдут до сервера. У меток — for, чтобы связать их с полями через id.

Следующий шаг — добавить валидацию (required, minlength, pattern), подключить стили и написать серверный обработчик. Базовая HTML-валидация работает без JavaScript, но для сложных сценариев понадобится скрипт.

Не забывайте про доступность. Тег label — не украшение, а обязательный элемент. Без него скринридеры не смогут объяснить пользователю, что вводить в поле. Потратьте минуту на связку меток — и форма станет удобной для всех.

Вам нужна биржа фриланса для новичков или требуются разработчики сайтов?