Кнопка отправки в HTML - input submit

Введение

Кнопка отправки формы в HTML – это один из самых базовых и при этом самых важных элементов веб-интерфейса. Через нее пользователь передает данные на сервер или запускает обработку формы на стороне клиента.

Сейчас чаще используются и <button type="submit">, и <input type="submit">, но старый добрый input-submit по-прежнему широко применяется. В этой статье я покажу вам, как работает input type="submit", какие атрибуты он поддерживает, как он взаимодействует с формой, как его стилизовать и как обрабатывать клики с помощью JavaScript.

Давайте разберем эту тему системно, с практическими примерами и пояснениями, чтобы вы могли уверенно использовать кнопку отправки в реальных проектах.

Что такое input type="submit" и как он работает

Базовый синтаксис

Элемент input с типом submit создает кнопку, которая при нажатии пытается отправить родительскую форму.

Простейший пример формы с кнопкой отправки:

<form action="/submit" method="post">
  <!-- Поле для ввода имени -->
  <input type="text" name="username" placeholder="Ваше имя" />

  <!-- Кнопка отправки формы -->
  <input type="submit" value="Отправить" />
</form>

Комментарии к примеру:

// form - контейнер с данными для отправки
// action - адрес на сервере куда будут отправлены данные
// method - HTTP метод отправки данных (GET или POST)
// input type="text" - поле ввода
// input type="submit" - кнопка запускающая отправку формы

Механика простая:

1. Браузер находит ближайший родительский элемент <form>.
2. При клике по input type="submit" запускается валидация полей формы (встроенная и, при необходимости, пользовательская).
3. Если валидация проходит успешно, браузер формирует запрос и отправляет данные на адрес, указанный в action.
4. Если валидация не проходит, отправка отменяется, а браузер может подсветить проблемные поля.

Поведение по умолчанию

Обратите внимание на несколько моментов поведения по умолчанию:

• Если вы нажимаете Enter в текстовом поле внутри формы, браузер обычно "нажимает" первую кнопку отправки (submit) в этой форме.
• При отсутствии action данные отправятся на тот же URL, на котором сейчас находится страница.
• Если не задан method, используется GET – данные уйдут в строке запроса (query string).

Эти детали важны, когда вы проектируете поведение формы и маршруты на сервере.

Атрибуты input type="submit"

Теперь давайте посмотрим, какие атрибуты чаще всего используются с кнопкой отправки, и как они влияют на поведение.

value – текст на кнопке

Атрибут value задает текст, который вы видите на кнопке.

<input type="submit" value="Отправить форму" />

// value - текст который браузер отобразит на кнопке

Если атрибут value не задан, браузер может вывести текст по умолчанию (например, "Submit", "Отправить" в зависимости от языка и настроек). В интерфейсе лучше указывать значение явно, чтобы не зависеть от локализации браузера пользователя.

name и значение кнопки

Кнопка отправки тоже может иметь name и передавать свою пару имя–значение на сервер.

<form action="/submit" method="post">
  <!-- Другие поля формы -->

  <!-- Основная кнопка отправки -->
  <input type="submit" name="action" value="save" />

  <!-- Альтернативная кнопка отправки -->
  <input type="submit" name="action" value="delete" />
</form>

Комментарии:

// При нажатии первой кнопки на сервер уйдет action=save
// При нажатии второй кнопки на сервер уйдет action=delete
// На стороне сервера вы можете по значению action понять какое действие выбрал пользователь

Так вы можете реализовать несколько сценариев отправки одной и той же формы.

id и привязка JavaScript / CSS

Атрибут id нужен для:

• стилизации через CSS,
• поиска элемента через JavaScript,
• связи с другими элементами (например, через label в специфичных кейсах).

<input type="submit" id="submit-btn" value="Отправить" />

/* Здесь мы стилизуем кнопку по id */
#submit-btn {
  background-color: #4caf50;
  color: white;
}

Комментарии:

// id должен быть уникальным в пределах страницы
// по id удобно вешать обработчики событий в JS

disabled – отключение кнопки

Атрибут disabled делает кнопку неактивной. Пользователь не сможет по ней кликнуть, а браузер не отправит форму при попытке.

<input type="submit" value="Отправка недоступна" disabled />

// disabled - блокирует кнопку и визуально показывает что действие сейчас невозможно

Часто вы будете динамически включать или выключать кнопку через JavaScript – например, пока форма валидируется или пока не отмечен чекбокс "Я согласен с условиями".

<form id="agree-form">
  <!-- Чекбокс согласия -->
  <label>
    <input type="checkbox" id="agree-checkbox" />
    Я соглашаюсь с условиями
  </label>

  <!-- Кнопка изначально отключена -->
  <input type="submit" id="submit-btn" value="Продолжить" disabled />
</form>

<script>
// Находим элементы формы
const checkbox = document.getElementById('agree-checkbox');
const submitBtn = document.getElementById('submit-btn');

// Подписываемся на изменение чекбокса
checkbox.addEventListener('change', function () {
  // Включаем или выключаем кнопку в зависимости от состояния чекбокса
  submitBtn.disabled = !checkbox.checked;
});
</script>

Комментарии:

// addEventListener('change') - реагируем на изменение состояния чекбокса
// submitBtn.disabled = !checkbox.checked - если чекбокс отмечен, кнопка становится активной

form – привязка к форме вне DOM-иерархии

Иногда разметку формы и кнопки нужно разделить. Для этого у формы должен быть id, а у кнопки – атрибут form с этим id.

<!-- Форма может находиться в одном месте -->
<form id="user-form" action="/save-user" method="post">
  <input type="text" name="name" placeholder="Имя" />
</form>

<!-- А кнопка отправки - в другом блоке -->
<div class="footer">
  <input type="submit" form="user-form" value="Сохранить" />
</div>

Комментарии:

// form="user-form" - указывает к какой форме относится эта кнопка
// при клике по кнопке будет отправлена форма с id="user-form"

Это удобно, если у вас сложные лэйауты, а кнопку нужно разместить в другом визуальном блоке.

Атрибуты управления отправкой формы

HTML5 добавил набор атрибутов, которые позволяют переопределять поведение отправки именно для конкретной кнопки:

• formaction
• formmethod
• formenctype
• formtarget
• formnovalidate

Давайте разберем каждый.

formaction – другой адрес отправки

formaction задает URL, на который отправятся данные формы при нажатии этой кнопки, переопределяя action формы.

<form action="/save" method="post">
  <input type="text" name="title" placeholder="Заголовок" />

  <!-- Кнопка для обычного сохранения -->
  <input type="submit" value="Сохранить" />

  <!-- Кнопка для сохранения и публикации -->
  <input type="submit" value="Сохранить и опубликовать" formaction="/publish" />
</form>

Комментарии:

// form action="/save" - адрес по умолчанию
// formaction="/publish" - для второй кнопки будет использован другой URL
// остальные данные формы при этом отправятся точно так же

formmethod – другой HTTP-метод

formmethod позволяет задать метод запроса только для этой кнопки.

<form action="/user" method="post">
  <input type="text" name="name" placeholder="Имя" />

  <!-- Создать пользователя - POST -->
  <input type="submit" value="Создать" />

  <!-- Удалить пользователя - отправка GET-запроса (пример, не лучший для реального API) -->
  <input type="submit" value="Удалить" formmethod="get" formaction="/user/delete" />
</form>

Комментарии:

// formmethod="get" - перегружает method="post" у формы
// так можно гибко управлять типом запроса в зависимости от выбранного действия

На практике для операций удаления и изменения лучше использовать методы POST/DELETE/PUT на сервере, но сам прием полезен для понимания.

formenctype – формат отправки данных

formenctype задает тип кодирования данных при отправке. Это особенно важно при загрузке файлов.

Чаще всего встречаются:

• application/x-www-form-urlencoded – значение по умолчанию для POST
• multipart/form-data – нужен при отправке файлов
• text/plain – редко используется, обычно для отладки

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="photo" />
  
  <!-- Обычная отправка (наследует enctype формы) -->
  <input type="submit" value="Загрузить" />

  <!-- Альтернативная кнопка с другим enctype (пример для демонстрации) -->
  <input type="submit" value="Загрузить как текст" formenctype="text/plain" />
</form>

Комментарии:

// enctype на форме задает формат по умолчанию
// formenctype на кнопке может переопределить поведение только для этой кнопки
// для загрузки файлов важно использовать multipart/form-data

formtarget – где открыть результат

formtarget работает похоже на target у ссылок. С его помощью можно указать, где открыть результат отправки формы:

• _self – в этом же окне (по умолчанию),
• _blank – в новом окне/вкладке,
• имя iframe – для загрузки результата в определенный фрейм.

<form action="/report" method="get">
  <!-- Поля для формирования отчета -->

  <!-- Открыть результат в этом же окне -->
  <input type="submit" value="Показать здесь" />

  <!-- Открыть результат в новой вкладке -->
  <input type="submit" value="Открыть в новой вкладке" formtarget="_blank" />
</form>

Комментарии:

// formtarget="_blank" - позволяет не перезагружать текущую страницу
// это удобно для отчетов и экспортов

formnovalidate – отключение проверки

Если вы хотите отправить форму без встроенной HTML5-валидации (required, pattern и т.п.), на конкретной кнопке можно указать formnovalidate.

<form action="/profile" method="post">
  <input type="email" name="email" required placeholder="Email" />

  <!-- Обычная отправка - требует валидный email -->
  <input type="submit" value="Сохранить" />

  <!-- Отправка без проверки - например, черновик -->
  <input type="submit" value="Сохранить как черновик" formnovalidate />
</form>

Комментарии:

// required на поле email требует корректный адрес
// при клике по "Сохранить как черновик" браузер не будет проверять email
// этот прием удобно использовать для черновиков и временных сохранений

Связь input-submit с формой

Поиск ближайшей формы

Когда вы нажимаете на input type="submit", браузер ищет "свою" форму следующим образом:

1. Сначала смотрит на атрибут form. Если он указан, используется форма с этим id.
2. Если form нет, ищет ближайшего родителя <form> в DOM-дереве.
3. Если форма не найдена, попытка отправки не выполняется.

Это важно, когда вы перемещаете кнопку по DOM или используете ее вне формы.

Несколько кнопок отправки и обработка на сервере

Вы уже видели пример с несколькими кнопками в одной форме. Давайте еще раз посмотрим на это с точки зрения сервера.

<form action="/order" method="post">
  <input type="text" name="item" placeholder="Товар" required />
  <input type="number" name="qty" value="1" min="1" />

  <!-- Кнопка оформления заказа -->
  <input type="submit" name="order_action" value="buy" />

  <!-- Кнопка добавления в избранное -->
  <input type="submit" name="order_action" value="wishlist" />
</form>

Комментарии:

// В зависимости от того какая кнопка нажата на сервер уйдет order_action=buy или order_action=wishlist
// остальная форма отправится одинаково

На серверной стороне вы можете проверять, какое значение пришло у order_action, и выполнять нужную логику.

Отправка формы через JavaScript без клика

Кнопка отправки – не единственный способ отправить форму. То же самое делает метод form.submit() в JavaScript.

<form id="contact-form" action="/contact" method="post">
  <input type="text" name="name" required placeholder="Имя" />
  <input type="email" name="email" required placeholder="Email" />
  <input type="submit" value="Отправить" />
</form>

<script>
// Находим форму по id
const form = document.getElementById('contact-form');

// Отправляем форму программно через 5 секунд (пример)
setTimeout(function () {
  // Здесь мы вызываем отправку формы из кода
  form.submit();
}, 5000);
</script>

Комментарии:

// form.submit() - программный вызов отправки без клика пользователя
// при таком вызове встроенная валидация HTML5 не всегда срабатывает
// для запуска валидации через JS лучше использовать form.requestSubmit()

Если вы хотите программно инициировать отправку так, чтобы сработала валидация и события submit, используйте form.requestSubmit().

// Запускает отправку с валидацией и всеми обработчиками
form.requestSubmit();

// requestSubmit() - более современный и корректный способ имитировать нажатие кнопки отправки

Стилизация input type="submit"

Базовая стилизация через CSS

По умолчанию кнопка submit выглядит по-своему в каждом браузере и операционной системе. Вы можете задать ей единый стиль через CSS.

<form>
  <input type="submit" id="submit-btn" value="Отправить" />
</form>

<style>
/* Здесь мы переопределяем стандартный вид кнопки */
#submit-btn {
  background-color: #007bff;   /* Синий фон */
  color: #ffffff;              /* Белый текст */
  border: none;                /* Убираем рамку браузера */
  padding: 10px 20px;          /* Внутренние отступы */
  font-size: 16px;             /* Размер шрифта */
  border-radius: 4px;          /* Скругление углов */
  cursor: pointer;             /* Рука при наведении */
}

/* Стиль при наведении курсора */
#submit-btn:hover {
  background-color: #0056b3;
}

/* Стиль для отключенной кнопки */
#submit-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>

Комментарии:

// :hover - псевдокласс для наведения
// :disabled - состояние когда кнопка выключена
// cursor: pointer - дает пользователю визуальный сигнал что элемент кликабелен

Сброс стандартных стилей браузера

Некоторые браузеры накладывают свои стили (особенно мобильные). Вы можете дополнительно "обнулить" их:

input[type="submit"] {
  -webkit-appearance: none; /* Отключаем оформление Safari */
  appearance: none;         /* Отключаем оформление по умолчанию */
}

// appearance: none - позволяет начать стилизацию "с нуля"

Иконки и псевдо-кнопки

С input-submit сложнее добавить иконку внутрь с помощью HTML, поэтому иногда используют <button type="submit">. Но вы можете имитировать иконку, используя фон:

<input type="submit" id="icon-submit" value="Отправить" />

<style>
#icon-submit {
  background-image: url('/icons/send.svg'); /* Иконка отправки */
  background-repeat: no-repeat;
  background-position: 10px center;        /* Смещаем иконку влево */
  padding-left: 40px;                      /* Добавляем отступ чтобы не наезжать на текст */
}
</style>

Комментарии:

// background-image - добавляем иконку фоном
// padding-left - увеличиваем отступ чтобы текст не накладывался на иконку

Если вы хотите полноценный контроль над содержимым кнопки (текст + иконка в разметке), рассмотрите button type="submit", но это уже другая тема.

JavaScript и обработка кликов по submit

Обработка события submit у формы

Главное событие, с которым вы будете работать, – это submit у формы. Смотрите, я покажу вам, как это работает:

<form id="login-form">
  <input type="text" name="login" required placeholder="Логин" />
  <input type="password" name="password" required placeholder="Пароль" />
  <input type="submit" value="Войти" />
</form>

<script>
// Находим форму
const form = document.getElementById('login-form');

// Подписываемся на событие submit
form.addEventListener('submit', function (event) {
  // Отменяем отправку формы по умолчанию
  event.preventDefault();

  // Здесь вы можете прочитать данные формы
  const formData = new FormData(form);

  // Получаем значения полей
  const login = formData.get('login');
  const password = formData.get('password');

  // Выведем их в консоль (пример)
  console.log('Логин:', login);
  console.log('Пароль:', password);

  // Здесь вы можете отправить данные через fetch/AJAX
});
</script>

Комментарии:

// submit-событие срабатывает при клике на submit-кнопку или при нажатии Enter
// event.preventDefault() блокирует стандартную отправку
// FormData(form) позволяет удобно собрать все поля в объект

Такой подход часто используют в SPA и приложениях, где вы отправляете данные через AJAX, не перезагружая страницу.

Обработка клика по конкретной кнопке

Иногда важно понять, по какой именно кнопке нажал пользователь (если их несколько). В этом случае можно повесить обработчик клика на каждую кнопку.

<form id="post-form">
  <input type="text" name="title" placeholder="Заголовок" required />
  <textarea name="content" placeholder="Текст"></textarea>

  <input type="submit" id="save-draft" name="action" value="draft" />
  <input type="submit" id="publish" name="action" value="publish" />
</form>

<script>
// Находим элементы
const form = document.getElementById('post-form');
const saveDraftBtn = document.getElementById('save-draft');
const publishBtn = document.getElementById('publish');

let clickedButton = null;

// Запоминаем какую кнопку нажали
saveDraftBtn.addEventListener('click', function () {
  clickedButton = 'draft';
});

publishBtn.addEventListener('click', function () {
  clickedButton = 'publish';
});

// Обрабатываем отправку формы
form.addEventListener('submit', function (event) {
  event.preventDefault();

  // Здесь вы можете использовать clickedButton для выбора логики
  console.log('Нажата кнопка:', clickedButton);

  // Дальше можно отправить данные через fetch или обычным запросом
});
</script>

Комментарии:

// clickedButton - переменная в которой мы запоминаем какая кнопка была нажата
// в обработчике submit мы уже знаем что выбрал пользователь

В современных браузерах в обработчике submit также доступно свойство event.submitter с ссылкой на конкретную кнопку, по которой кликнули. Но для максимальной совместимости старый способ с переменной все еще используется.

Предотвращение двойной отправки

Распространенная проблема – пользователь дважды кликает по кнопке и отправляет форму два раза. Часто это решается отключением кнопки после первого клика.

<form id="payment-form">
  <!-- Поля для оплаты -->

  <input type="submit" id="pay-btn" value="Оплатить" />
</form>

<script>
// Находим форму и кнопку
const paymentForm = document.getElementById('payment-form');
const payBtn = document.getElementById('pay-btn');

// Вешаем обработчик отправки
paymentForm.addEventListener('submit', function (event) {
  // Блокируем стандартную отправку
  event.preventDefault();

  // Отключаем кнопку чтобы не дать нажать повторно
  payBtn.disabled = true;
  payBtn.value = 'Обработка...';

  // Имитация асинхронной операции (запрос на сервер)
  setTimeout(function () {
    // Здесь вы бы обработали результат запроса
    // Для примера просто снова включим кнопку
    payBtn.disabled = false;
    payBtn.value = 'Оплатить';
  }, 3000);
});
</script>

Комментарии:

// payBtn.disabled = true - мгновенно блокирует повторные клики
// текст кнопки меняется чтобы пользователь понимал что что-то происходит

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

Валидация и input-submit

Встроенная HTML5-валидация

Многие атрибуты типа required, pattern, min, max, type="email" и другие запускаются именно при попытке отправки формы, чаще всего через кнопку submit.

<form>
  <!-- Обязательное поле email -->
  <input type="email" name="email" required placeholder="Email" />

  <!-- Обязательное поле с паттерном для телефона -->
  <input
    type="tel"
    name="phone"
    pattern="^[0-9\-\+\s]{7,15}$"
    placeholder="Телефон"
  />

  <input type="submit" value="Отправить" />
</form>

Комментарии:

// required - поле обязательно для заполнения
// type="email" - браузер проверит формат email
// pattern - регулярное выражение для проверки телефона

При неудачной проверке браузер:

• отменяет отправку формы;
• подсвечивает проблемное поле;
• показывает подсказку (зависит от браузера).

Отключение валидации

Вы уже видели возможность отключить валидацию на конкретной кнопке через formnovalidate. Можно также отключить ее на всей форме:

<form novalidate>
  <input type="email" name="email" required placeholder="Email" />
  <input type="submit" value="Отправить без проверки" />
</form>

Комментарии:

// novalidate на форме - полностью отключает встроенную HTML5-валидацию для всех кнопок
// дальше вы можете реализовать свою валидацию на JavaScript

Комбинация своей валидации и отправки

Давайте разберемся на примере, как совместить кастомную проверку и отправку формы.

<form id="reg-form" action="/register" method="post">
  <input type="text" name="username" id="username" required placeholder="Имя пользователя" />
  <input type="password" name="password" id="password" required placeholder="Пароль" />
  <input type="password" name="password2" id="password2" required placeholder="Повтор пароля" />
  <input type="submit" value="Зарегистрироваться" />
</form>

<script>
const form = document.getElementById('reg-form');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

form.addEventListener('submit', function (event) {
  // Сначала даем сработать встроенной валидации
  if (!form.checkValidity()) {
    // Если встроенная проверка не прошла, даем браузеру показать ошибки
    return;
  }

  // Отменяем стандартную отправку чтобы проверить пароли
  event.preventDefault();

  // Проверяем совпадение паролей
  if (password.value !== password2.value) {
    alert('Пароли не совпадают');
    return;
  }

  // Если все хорошо - отправляем форму программно
  form.submit();
});
</script>

Комментарии:

// form.checkValidity() - встроенный метод проверки всех полей формы
// alert - просто пример сообщения об ошибке
// form.submit() - вызываем отправку после успешной кастомной проверки

Такой подход дает вам возможность комбинировать встроенную и свою логику валидации.

Практические паттерны использования input-submit

Форма поиска

Один из базовых кейсов – форма поиска, часто с методом GET.

<form action="/search" method="get">
  <input type="text" name="q" placeholder="Поиск по сайту" />
  <input type="submit" value="Найти" />
</form>

Комментарии:

// method="get" - запрос с параметрами в адресной строке (например /search?q=текст)
// имя q - часто так называют параметр поискового запроса

Форма входа (login)

Обычный сценарий – авторизация с последующей серверной проверкой.

<form action="/login" method="post">
  <input type="text" name="username" required placeholder="Логин" />
  <input type="password" name="password" required placeholder="Пароль" />
  <input type="submit" value="Войти" />
</form>

Комментарии:

// method="post" - логично для чувствительных данных
// type="password" - скрывает ввод пользователю

"Чистая" отправка через AJAX

Иногда вы используете кнопку submit только для UX (Enter в поле, фокус и т.д.), но саму отправку делаете через fetch.

<form id="feedback-form">
  <textarea name="message" id="message" required placeholder="Ваш отзыв"></textarea>
  <input type="submit" value="Отправить отзыв" />
</form>

<script>
const form = document.getElementById('feedback-form');

form.addEventListener('submit', async function (event) {
  event.preventDefault();

  const formData = new FormData(form);

  try {
    // Отправляем данные как AJAX-запрос
    const response = await fetch('/api/feedback', {
      method: 'POST',
      body: formData
    });

    if (!response.ok) {
      throw new Error('Ошибка при отправке');
    }

    alert('Отзыв отправлен');
    form.reset(); // Очищаем форму
  } catch (error) {
    alert('Не удалось отправить отзыв');
    console.error(error);
  }
});
</script>

Комментарии:

// fetch - современный способ отправки запросов из JavaScript
// await fetch(...) - асинхронное ожидание ответа
// form.reset() - сброс формы в исходное состояние

Здесь кнопка submit по сути только триггерит событие submit, а все остальное делает ваш JS-код.

Заключение

Кнопка отправки input type="submit" – это не просто "кнопка с текстом", а ключевой элемент механизма работы HTML-форм. Через нее браузер:

• находит связанную форму (по DOM или id);
• запускает HTML5-валидацию полей;
• формирует и отправляет HTTP-запрос на сервер.

Вы увидели, как на поведение отправки влияют атрибуты:

• value, name, disabled, form;
• formaction, formmethod, formenctype, formtarget, formnovalidate.

Мы разобрали, как обрабатывать отправку формы через JavaScript, как предотвращать стандартное поведение, как различать нажатия разных кнопок, как стилизовать кнопку и как сочетать встроенную валидацию с собственной логикой.

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

Частозадаваемые технические вопросы по теме и ответы

Как узнать в обработчике submit, какая именно submit-кнопка была нажата

В современных браузерах у события submit есть свойство event.submitter.

form.addEventListener('submit', function (event) {
  event.preventDefault();

  const btn = event.submitter;          // Здесь конкретная нажатая кнопка
  const action = btn?.value;            // Можно взять value или name

  console.log('Кнопка:', action);
});

Если нужна поддержка старых браузеров – используйте подход с запоминанием кнопки в переменной при клике, как описано в статье.

Почему при вызове form.submit() не срабатывает валидация и обработчик submit

Метод form.submit() выполняет низкоуровневую отправку без событий и проверки. Чтобы работала валидация и обработчики, используйте:

form.requestSubmit();  // Имитирует "нажатие" submit-кнопки с полным циклом

Если requestSubmit недоступен, вы можете вручную вызвать form.checkValidity() и затем form.submit() при успехе.

Как сделать отправку формы по Enter без кнопки submit

Браузер ожидает наличие хотя бы одной кнопки отправки. Если кнопки нет, поведение может отличаться. Минимальное решение – добавить скрытую кнопку submit:

<form>
  <input type="text" name="q" />

  <!-- Скрытая кнопка для обработки Enter -->
  <input type="submit" style="display:none" />
</form>

Теперь нажатие Enter в поле вызовет событие submit.

Почему input type="submit" не отправляет форму внутри модального окна или кастомного компонента

Проверьте, есть ли реальный <form> в DOM и не вложен ли он некорректно (например, внутри другого form). Также убедитесь, что:

• нет JavaScript-обработчиков, вызывающих event.preventDefault() для событий клика или submit;
• у submit-кнопки корректно указан атрибут form, если она вынесена за пределы тега <form>.

Если форма создается динамически, убедитесь, что слушатели событий навешиваются после вставки формы в DOM.

Как отправить форму на другой домен и не нарушить CORS

Сама HTML-форма (через submit) не подпадает под CORS-ограничения так же, как AJAX-запросы. Если вы используете обычный submit:

<form action="https://external.example.com/submit" method="post">
  <!-- Поля -->
  <input type="submit" value="Отправить на внешний сервис" />
</form>

Браузер отправит запрос без CORS-предзапросов, но:

• вы не сможете прочитать ответ через JavaScript из другого домена;
• если нужен контроль ответа на стороне клиента, лучше использовать прокси на вашем сервере или настраивать CORS для AJAX-запросов.