Отправка формы кнопкой вне тега <form>: возможности HTML5

Быстрый ответ

Для привязки кнопки, которая находится вне блока <form>, к данной форме, следует присвоить кнопке атрибут form с значением id соответствующей формы:

<form id="myForm">
  <!-- Элементы управления -->
</form>

<!-- Кнопка "Выброс", опасно расположенная на расстоянии от главной панели управления -->
<button form="myForm" type="submit">Выброс</button>

После нажатия на <button>, #myForm немедленно будет выполнена, независимо от того, что кнопка расположена вне <form>.

Расширение возможностей за пределами основных

Этот подход подойдёт для небольших проектов. Размышляйте о более крупных и сложных проектах — они требуют большей гибкости и дополнительных решений.

Альтернативные способы активации

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

• JavaScript: Используйте стандартный подход с применением JavaScript: document.getElementById('myForm').submit();
• jQuery: Для сокращения кода применяйте jQuery: $('#myForm').submit();
• Скрытая кнопка-ниндзя: Можно скрыть кнопку внутри формы следующим образом: <input type="submit" style="display:none;" form="myForm">.

Подробнее об этом расскажет наш спикер на видео

Продвинутое использование атрибутов

• formaction: Если требуется отправить форму на другой адрес, используйте атрибут formaction="/another-url".
• method="GET": Чтобы делать данные формы видимыми в URL используйте метод GET.
• Стилизация с CSS: Применение CSS позволяет сделать форму визуально привлекательной и впечатляющей.

Вопросы комфорта пользователей

• tabindex="0": Включите навигацию по форме при помощи клавиатуры для удобства пользователей.
• Адаптивность: Стремитесь к созданию адаптивных форм и кнопок, чтобы размеры устройств не влияли на удобство их использования.

Визуализация

Представьте, что <form> — это космический корабль, а кнопка отправки — это система экстренной эвакуации, расположенная в любом месте.

Форма-корабль (🚀):
  – Контроль 1 🎛️
  – Контроль 2 🕹️
  – Кнопка экстренной эвакуации 🆘 (внутри)

Внешняя кнопка экстренной эвакуации (🔴):

При активации внешней кнопки экстренной эвакуации (🔴):
🔴 ➡️ команды ➡️ 🚀

Внутри корабля: 
🆘 срабатывает!

Корабль выпускает капсулу экстренной эвакуации 🛰️!

Таким образом, независимо от местонахождения кнопки, она способна инициировать необходимые действия.

Форма: это больше, чем просто поля ввода — дружественные элементы формы

Форма становится удобнее благодаря дополнительным элементам.

• input type="file": Элемент для загрузки файлов — это важный ассистент.
• Выбор пользователем: Предоставьте пользователю возможность выбора при помощи радиокнопок и чекбоксов.
• Динамизм JavaScript: Улучшите форму с помощью интерактивности и валидации данных, создавая незабываемые пользовательские впечатления.

Подготовка к потенциальным проблемам

Минимизируйте возможные "астероиды" на Вашем пути следующими способами:

• Совместимость: Некоторые старые браузеры могут некорректно работать с атрибутом form. Будьте на это готовы.
• Фобия JavaScript: У некоторых пользователей JavaScript может быть отключён. Учтите это при разработке.
• Предотвращение повторной отправки: Избегайте случайных повторных отправок, отключив кнопку после её использования.

Полезные материалы

1. HTMLFormElement: метод submit() – Web APIs | MDN — Документация метода submit() для программной отправки формы.
2. Метод submit() объекта формы DOM HTML — Учебник по отправке формы с использованием JavaScript.
3. Свойства и методы форм — Руководство по взаимодействию с формами в JavaScript.
4. HTML Стандарт — Официальная спецификация алгоритма отправки формы.
5. Всплытие и перехват — Общее понимание распространения событий, что является ключевым для обработки отправки формы на стороне клиента.
6. Обучающий курс по формам | Инициатива веб-доступности (WAI) | W3C — Рекомендации по обеспечению доступности при работе с веб-формами.