Урок: сравнить настройки формы и выбранной кнопки

Назначение

У формы могут быть общие action и method, а у кнопки — собственные переопределения. Урок помогает увидеть эти различия до отправки и затем подтвердить реальный запрос в Network.

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

Создайте локальную форму id override-form и submit-кнопку id override-button с formaction. Код читает исходные атрибуты и разрешённые свойства. Он ничего не отправляет и не обращается к серверу.

Пример

const form = document.querySelector("#override-form");
const button = document.querySelector("#override-button");
console.table({
  form:{action:form.action, method:form.method},
  button:{actionAttribute:button.getAttribute("formaction"), actionProperty:button.formAction, methodAttribute:button.getAttribute("formmethod")}
});

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

GetAttribute показывает записанное переопределение или null, а URL-свойства могут показывать абсолютное разрешённое представление. Эти значения объясняют разметку, но окончательный запрос лучше проверить отдельно.

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

Не вычисляйте эффективный адрес простым выбором любого непустого DOM-свойства кнопки: свойства имеют свои значения по умолчанию. Submit-обработчик может перехватить отправку. Для настоящего результата учитывайте инициатор, валидацию и работу скриптов.

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

Добавьте formaction, затем удалите его и сравните таблицу. Повторите с formmethod. На безопасном тестовом endpoint выполните отправку каждой кнопкой и запишите фактические URL и метод.

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

• Локальный проект
• Панель Network
• Повторные проверки