Браузери постійно додають нові функції 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. Враховуючи наступну розмітку, форма буде надіслана, коли вхідні дані порожні, навіть якщо вхідні дані мають a 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 властивість події submit
Команда 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>Якщо у вас є кілька кнопок надсилання або введення, кожна з яких має різне значення, на сервер буде надіслано лише значення кнопки або введення, яке було натиснуто для надсилання форми, а не обидва значення. Це нічого нового. Новим є те, що слухач подій для події 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 Подія дозволяє настроюваним елементам брати участь у надсиланні форм. Проте поза веб-компонентами він все ще може бути корисним.
Ви додаєте a 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. Для елемента введення, атрибут типу якого є датою, місяцем, тижнем, часом, datetime-local, колір або файл, showPicker() забезпечує програмний спосіб відображення інтерфейсу користувача вибору. Для введення кольорів і файлів завжди можна було програмно показати засіб вибору шляхом виклику .click на вході:
document.querySelector('input[type="color"]').click();Цей підхід не працює з датами, тому було додано цей новий API. .showPicker() також працюватиме з кольоровими та файловими введеннями, але немає реальних переваг у його використанні .click().
Інертний атрибут
Завжди можна було вимкнути кілька введених даних одночасно, обернувши їх у HTML fieldset і відключення fieldset:
Inert — новий атрибут HTML. Це не тільки для форм, але форми, безумовно, є ключовим випадком використання. На відміну від disabled атрибут, inert можна застосувати до a form сам елемент. Все у формі буде нефокусованим і неактивним. Що стосується допоміжних технологій, inert схожий на налаштування aria-hidden="true". На відміну від disabled атрибут, inert не застосовує жодних стилів за замовчуванням, але легко додати свій власний:
form[inert] {
opacity: .2;
}Попереду ще більше…
Головне – це стиль <select> елементів, чого розробники хотіли десятиліттями. Схоже, незабаром це нарешті стане реальністю з появою selectmenu.
Але це поки що! Останні оновлення надають повну підтримку веб-переглядача для функцій, на які ми так чекали, що робить їх найкращими для робочого використання.
