HTML-тег <form>

Характеристики

• Тип: блочный, интерактивный, семантический
• Назначение: Контейнер для группировки элементов формы и отправки пользовательских данных на сервер.
• Родители: Любые HTML-теги, которые могут содержать блочные элементы.
• Потомки: Текст и любые HTML-теги, обычно элементы формы.
• Глобальные атрибуты: все
• Атрибуты событий: все

Атрибуты

• action — URL, куда отправляются данные формы.
• method — HTTP-метод отправки данных (GET, POST).
• enctype — тип кодировки данных (application/x-www-form-urlencoded, multipart/form-data, text/plain).
• autocomplete — включает или отключает автозаполнение полей формы.
• novalidate — отключает встроенную валидацию формы.
• target — указывает, где открыть ответ сервера (например, _self, _blank).
• name — имя формы, используемое при отправке данных.
• rel — отношение между текущим документом и формой.

Пример использования

<form id="myForm" action="/submit" method="POST">
  <!-- Элементы формы -->
</form>

Использование в JavaScript

// Получение формы по ID
const form = document.getElementById('myForm');

// Установка обработчика события отправки формы
form.onsubmit = function(event) {
  event.preventDefault(); // Предотвращает отправку формы
  console.log('Форма отправлена');
};

// Изменение действия формы
form.action = 'https://example.com/submit';

Рекомендации по обеспечению доступности (a11y)

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

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