Атрибут formaction тега <button>
Описание
Атрибут formaction переопределяет атрибут action родительской формы для конкретной кнопки отправки. Позволяет одной форме отправлять данные на разные URL в зависимости от нажатой кнопки.
<form>
<input type="text" name="username" placeholder="Имя пользователя">
<button type="submit">Стандартная отправка</button>
<button type="submit" formaction="/special-handler">
Альтернативная отправка
</button>
</form>
Основные характеристики:
| Аспект | Поведение | Примечание |
|---|---|---|
| Приоритет | Переопределяет action формы | Только для кнопки с type="submit" |
| Метод | Можно комбинировать с formmethod | GET/POST/PUT/DELETE |
| Валидация | Проверка формы перед отправкой | Работает с required полями |
Практический пример с разными обработчиками:
<form>
<input type="email" name="email" required>
<button type="submit" formaction="/subscribe">
Подписаться
</button>
<button type="submit" formaction="/contact">
Отправить сообщение
</button>
</form>
Комбинация с другими атрибутами:
<form>
<input type="file" name="document">
<button type="submit"
formaction="/upload"
formmethod="post"
formenctype="multipart/form-data">
Загрузить
</button>
</form>
Важные замечания:
- Работает только с кнопками типа submit
- Не влияет на стандартное поведение формы при Enter
- Для кнопок вне формы используйте комбинацию с атрибутом form
- Поддерживается во всех современных браузерах
Пример с JavaScript-проверкой:
<form id="multi-action-form">
<input type="text" name="query" required>
<button type="submit" formaction="/search" onclick="return validateSearch()">
Искать
</button>
</form>
<script>
function validateSearch() {
const input = document.querySelector('#multi-action-form input');
return input.value.length > 2;
}
</script>
Примечание: Используйте formaction для создания многофункциональных форм без JavaScript, но убедитесь, что пользователь понимает, какое действие выполнится при нажатии каждой кнопки.
Совместимость с HTML5:
<form>
<button type="submit" formaction="/api/data" formnovalidate>
Отправить без проверки
</button>
</form>