Что нового в формах в 2022 году?

requestSubmit()

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

Прежде чем мы рассмотрим, как .requestSubmit()это работает, давайте напомним себе, как работает программная отправка формы с помощью JavaScript при использовании .submit()метода. Отправка формы с помощью submit()не вызывает событие отправки. Таким образом, в следующем коде форма отправляется, preventDefault()не действует и ничего не записывается в консоль:

const form = document.forms[0];
form.addEventListener('submit', function(event) {
// code to submit the form goes here
event.preventDefault();
console.log('form submitted!');
});

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

});

.submit() также будет игнорировать любую проверку формы HTML. Учитывая следующую разметку, форма будет отправлена, когда ввод пуст, даже если ввод имеет required атрибут:

.requestSubmit() — это альтернативный способ отправки формы с помощью JavaScript, но, в отличие от .submit(), проверка формы в формате HTML предотвратит отправку формы. Если все данные, введенные в форму, проходят проверку, submitсобытие будет запущено, что означает «форма отправлена!» будет зарегистрирован на консоли в следующем примере:

form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});

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

});

Вы уже можете добиться этого, программно нажав кнопку отправки формы, но requestSubmit, возможно, это более элегантное решение.

submitter свойство события отправки

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

Если у вас есть несколько кнопок отправки или входных данных, каждая из которых имеет свое значение, на сервер будет отправлено только значение кнопки или ввода, которое было нажато для отправки формы, а не оба значения. Ничего нового. Новым является то, что прослушиватель событий для события отправки теперь имеет доступ к event.submitterсвойству. Вы можете использовать это, чтобы добавить класс к кнопке или вводу, который инициировал отправку формы, например, или для получения его valueили любого другого из его атрибутов HTML.

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. Основной вариант использования этого formdataсобытия — включение пользовательских элементов для участия в отправке форм. Однако за пределами веб-компонентов он все еще может быть полезен.

Вы добавляете formdataпрослушиватель событий в форму, с которой хотите взаимодействовать:

document.querySelector('form').addEventListener('formdata', handleFormdata);
Событие запускается как обычной отправкой HTML-формы, так и появлением new FormData(). event.formDataсодержит все передаваемые данные.

function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}
Функция обратного вызова для formdataпрослушивателя событий запускается перед отправкой данных на сервер, что дает вам возможность добавить или изменить отправляемые данные.

function handleFormdata(event) {
event.formData.append('name', 'John');
}
Вы могли бы изменить или добавить FormDataвнутренний обработчик события отправки, но formdata это позволяет вам отделить логику. Это также альтернатива использованию скрытых входных данных в разметке вашей формы в тех случаях, когда вы отправляете форму «по старинке», то есть полагаетесь на встроенную функциональность HTML для отправки формы, а не делаете это с помощью fetch.

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

showPicker() поддерживается, начиная с Chrome 99, Firefox 101 и в предстоящем Safari 16. Для элемента ввода, атрибутом type которого является дата, месяц, неделя, время datetime-local, цвет или файл, showPicker() предоставляется программный способ отображения пользовательского интерфейса выбора. Для ввода цвета и файла всегда можно было программно отобразить средство выбора, вызвав .click ввод:

document.querySelector('input[type="color"]').click();
Этот подход не работает для ввода даты, поэтому был добавлен этот новый API. .showPicker() также будет работать с входными данными цвета и файла, но нет никакого реального преимущества в его использовании по сравнению с .click().

Редактор :

Олли Уильямс

Дата :

19-09-2022

Теги :

CSS, формы