form: поле за пределами разметки формы

Назначение

Атрибут form связывает поддерживаемый элемент с формой по её id, даже когда элемент находится снаружи её HTML-контейнера.

Как это работает

Связь нужна, например, для кнопки отправки в отдельной панели. Значение должно точно совпасть с id формы в том же документе. Наличие form у контейнера не следует считать автоматической связью для всех потомков.

Пример

<form id="profile"><label>Имя <input name="name" required></label></form>
<p>Панель действий вне формы:</p>
<button type="submit" form="profile">Сохранить имя</button>

Что должно получиться

Внешняя кнопка относится к форме profile и запускает её обычную проверку. Для реальной отправки нужно отдельно настроить адрес и серверный обработчик.

Граница применения и частая ошибка

Не переносите кнопку за пределы form без проверки её владельца. Она может перестать отправлять нужную форму или случайно связаться с другой при повторении id.

Самостоятельная проверка

Переместите кнопку выше формы и проверьте связь в локальной странице. Удалите form у кнопки и сравните: визуальная близость сама по себе не определяет владельца.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.

Связанные материалы

• Формы HTML
• Элемент input
• Проверка с клавиатуры