Что нового в интерфейсных формах в 2025 году

requestSubmit()

Safari 16 стал последним браузером, в котором появилась поддержка requestSubmit().

Проблема с .submit()

Вызов form.submit() не инициирует событие submit. Например:

const form = document.forms[0];
form.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('Форма отправлена!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.submit();
});

В этом случае:

• событие submit не срабатывает
• preventDefault() не действует
• HTML-валидация (например, required) игнорируется

<form>
  <label for="name">Имя</label>
  <input required name="name" id="name" type="text">
</form>

Как работает .requestSubmit()

Это современный способ отправки формы. В отличие от .submit(), он:

• вызывает событие submit
• учитывает валидацию формы

form.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('Форма отправлена!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.requestSubmit();
});

Это элегантная альтернатива программному нажатию на кнопку отправки.

submitter — свойство события

Начиная с Safari 15.4, поддерживается свойство event.submitter, которое возвращает кнопку или input, вызвавшие отправку формы.

<form>
  <button name="foo" value="bar" type="submit">Bar</button>
  <button name="foo" value="baz" type="submit">Baz</button>
</form>

document.forms[0].addEventListener('submit', function(event) {
  event.preventDefault();
  console.log(event.submitter.value);
  console.log(event.submitter.formaction);
  event.submitter.classList.add('spinner-animation');
});

formdata — событие при отправке

Поддерживается начиная с Safari 15. Позволяет получить доступ к данным формы до её отправки:

document.querySelector('form').addEventListener('formdata', handleFormdata);

function handleFormdata(event) {
  for (const entry of event.formData.values()) {
    console.log(entry);
  }
}

Можно также программно добавить новые поля:

function handleFormdata(event) {
  event.formData.append('name', 'Иван');
}

Это альтернатива использованию hidden-полей.

showPicker() для элементов input

showPicker() поддерживается с Chrome 99, Firefox 101 и Safari 16. Позволяет программно открыть:

• выбор даты (type="date")
• времени, цвета, файлов и т. д.

Ранее использовалось:

document.querySelector('input[type="color"]').click();

Теперь для date можно вызвать:

document.querySelector('input[type="date"]').showPicker();

Удобнее и надёжнее.