Тег <form>

Описание

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

Простая форма входа:
<form action="/login" method="POST"> <div> <label for="username">Имя пользователя:</label> <input type="text" id="username" name="username" required> </div> <div> <label for="password">Пароль:</label> <input type="password" id="password" name="password" required> </div> <button type="submit">Войти</button> </form>
Форма с валидацией:
<form novalidate> <label> Email: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required> </label> <label> Телефон: <input type="tel" name="phone" pattern="[\+]\d{1}\s[\(]\d{3}[\)]\s\d{3}[\-]\d{2}[\-]\d{2}" placeholder="+7 (123) 456-78-90"> </label> <input type="submit" value="Отправить"> </form>
AJAX-форма с обработкой:
<form id="feedback-form"> <input type="text" name="name" placeholder="Ваше имя" required> <textarea name="message" placeholder="Сообщение" required></textarea> <button type="submit">Отправить</button> </form> <script> document.getElementById('feedback-form').addEventListener('submit', function(e) { e.preventDefault(); fetch('/api/feedback', { method: 'POST', body: new FormData(this) }) .then(response => alert('Успешно отправлено!')) .catch(error => alert('Ошибка: ' + error)); }); </script>

Современные практики:

  • Всегда связывайте <label> с полями ввода
  • Используйте семантические типы input (email, tel, number)
  • Добавляйте атрибуты валидации (required, pattern, min/max)
  • Для файлов указывайте enctype="multipart/form-data"
  • Реализуйте доступность (ARIA-атрибуты, клавиатурная навигация)

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

Атрибуты

accept Список MIME-типов для загрузки (устарел)
accept-charset Кодировки символов для формы
action URL для отправки формы
autocomplete Включает автозаполнение полей
enctype Способ кодирования данных
method HTTP-метод отправки (GET/POST)
name Имя формы
novalidate Отключает валидацию
target Где открывать ответ
accesskey Горячая клавиша для активации
class CSS-классы для стилизации
id Уникальный идентификатор
style Инлайновые CSS-стили
title Всплывающая подсказка

Поддержка браузерами
3.0 1.0 4.0 1.0 1.0