Браузеры постоянно добавляют новые функции HTML, JavaScript и CSS. Вот несколько полезных дополнений к работе с формами, которые вы могли пропустить…
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
атрибут:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>
.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
свойство события отправки
Ассоциация SubmitEvent.submitter
приобретенное имущество полная кроссбраузерная поддержка с выпуском Safari 15.4. Это свойство только для чтения определяет <button>
or <input type="submit">
элемент, вызвавший отправку формы.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>
Если у вас есть несколько кнопок отправки или входных данных, каждая из которых имеет свое значение, на сервер будет отправлено только значение кнопки или ввода, которое было нажато для отправки формы, а не оба значения. Ничего нового. Новым является то, что прослушиватель событий для события отправки теперь имеет доступ к 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
event позволяет пользовательским элементам принимать участие в отправке форм. Однако за пределами веб-компонентов он все еще может быть полезен.
Вы добавляете 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()
.
Инертный атрибут
Всегда можно было отключить несколько входных данных одновременно, обернув их в HTML-код. fieldset
и отключение fieldset
:
Inert — это новый атрибут HTML. Это не только для форм, но формы, безусловно, являются ключевым вариантом использования. в отличие от disabled
атрибут, inert
может применяться к form
сам элемент. Все в форме будет недоступно для фокусировки и кликов. Что касается вспомогательных технологий, inert
похоже на установку aria-hidden="true"
, в отличие от disabled
атрибут, inert
не применяет никаких стилей по умолчанию, но легко добавить свой собственный:
form[inert] {
opacity: .2;
}
Это еще не все…
Большой стиль <select>
элементы, чего разработчики хотели десятилетиями. Похоже, скоро это станет реальностью с введением selectmenu
.
Но это пока! Недавние обновления обеспечивают полную поддержку браузерами функций, которых мы так долго ждали, что делает их наиболее подходящими для производственного использования.