Przeglądarki stale dodają nowe funkcje HTML, JavaScript i CSS. Oto kilka przydatnych dodatków do pracy z formularzami, które mogłeś przegapić…
requestSubmit()
Safari 16 będzie ostatnią przeglądarką, dla której zostanie dodana obsługa requestSubmit.
Zanim spojrzymy jak .requestSubmit() działa, przypomnijmy sobie, jak działa programowe przesyłanie formularza za pomocą JavaScript podczas korzystania z .submit() metoda. Przesłanie formularza za pomocą submit() nie wyzwala zdarzenia przesyłania. Tak więc w poniższym kodzie formularz jest przesyłany, preventDefault() nie ma żadnego efektu i nic nie jest rejestrowane w konsoli:
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() zignoruje również wszelkie sprawdzanie poprawności formularza HTML. Biorąc pod uwagę następujące znaczniki, formularz zostanie przesłany, gdy dane wejściowe będą puste, mimo że dane wejściowe mają a required atrybut:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() jest alternatywnym sposobem przesłania formularza za pomocą JavaScript, ale w przeciwieństwie do .submit(), walidacja formularza HTML uniemożliwi przesłanie formularza. Jeśli wszystkie dane wprowadzone w formularzu przejdą walidację, submit zdarzenie zostanie zwolnione, co oznacza „przesłany formularz!” zostanie zalogowany do konsoli w następującym przykładzie:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})Możesz już to osiągnąć, klikając programowo przycisk przesyłania formularza, ale requestSubmit jest być może bardziej eleganckim rozwiązaniem.
submitter właściwość zgłoszenia zdarzenia
Połączenia SubmitEvent.submitter nieruchomość zdobyta pełna obsługa wielu przeglądarek wraz z wydaniem Safari 15.4. Ta właściwość tylko do odczytu określa <button> or <input type="submit"> element, który spowodował przesłanie formularza.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>Jeśli masz wiele przycisków przesyłania lub danych wejściowych, z których każdy ma inną wartość, na serwer zostanie wysłana tylko wartość przycisku lub danych wejściowych, które zostały kliknięte w celu przesłania formularza, a nie obie wartości. To nic nowego. Nowością jest to, że detektor zdarzeń dla zdarzenia przesyłania ma teraz dostęp do event.submitter własność. Możesz użyć tego, aby na przykład dodać klasę do przycisku lub danych wejściowych, które wywołały wysłanie formularza lub uzyskać jego value lub dowolny inny z jego atrybutów 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 wydarzenie
To nie jest szczególnie nowe, ale tylko osiągnięto wsparcie dla wielu przeglądarek wraz z wydaniem Safari 15. Główny przypadek użycia formdata wydarzenie umożliwia udział niestandardowych elementów w przesłanych formularzach. Jednak poza komponentami internetowymi nadal może być przydatny.
Dodajesz formdata detektor zdarzeń do formularza, z którym chcesz wchodzić w interakcję:
document.querySelector('form').addEventListener('formdata', handleFormdata);Zdarzenie jest uruchamiane zarówno przez zwykłe przesłanie formularza HTML, jak i przez wystąpienie new FormData(). event.formData przechowuje wszystkie przesłane dane.
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}Funkcja wywołania zwrotnego dla formdata detektor zdarzeń uruchamia się przed wysłaniem danych na serwer, co daje możliwość dodania lub modyfikacji wysyłanych danych.
function handleFormdata(event) {
event.formData.append('name', 'John');
}Mogłeś zmodyfikować lub dołączyć FormData wewnątrz modułu obsługi zdarzeń przesyłania, ale formdata pozwala oddzielić logikę. Jest to również alternatywa dla używania ukrytych danych wejściowych w znacznikach formularza w przypadkach, gdy przesyłasz formularz „w staromodny sposób” — tj. poleganie na wbudowanej funkcjonalności HTML do przesyłania formularza, zamiast robienia tego za pomocą fetch.
showPicker() dla elementów wejściowych
showPicker() został utrzymany od Chrome 99, Firefox 101 i w nadchodzącym Safari 16. Dla elementu wejściowego, którego atrybut type to Data, Miesiąc, Tydzień, Czas, datetime-local, kolor lub plik, showPicker() zapewnia programistyczny sposób wyświetlania interfejsu użytkownika wyboru. W przypadku danych wejściowych dotyczących kolorów i plików zawsze można było programowo wyświetlić selektor, dzwoniąc .click na wejściu:
document.querySelector('input[type="color"]').click();Takie podejście nie działa na danych wejściowych dat, dlatego dodano to nowe API. .showPicker() będzie również działać z kolorami i plikami wejściowymi, ale nie ma żadnej rzeczywistej przewagi nad używaniem go nad .click().
Atrybut obojętny
Zawsze można było wyłączyć wiele wejść jednocześnie, umieszczając je w kodzie HTML fieldset i wyłączenie fieldset:
Inert to nowy atrybut HTML. Nie dotyczy to tylko formularzy, formularze są z pewnością kluczowym przypadkiem użycia. w przeciwieństwie do disabled atrybut, inert można zastosować do form sam element. Wszystko w formularzu będzie nieaktywne i nie będzie można kliknąć. Jeśli chodzi o technologie wspomagające, inert jest podobny do ustawienia aria-hidden="true". w przeciwieństwie do disabled atrybut, inert domyślnie nie stosuje żadnej stylizacji, ale łatwo jest dodać własną:
form[inert] {
opacity: .2;
}Jeszcze więcej…
Największą jest stylizacja <select> elementy, coś, czego programiści pragnęli od dziesięcioleci. Wygląda na to, że wkrótce stanie się rzeczywistością dzięki wprowadzeniu selectmenu.
Ale na razie to wszystko! Ostatnie aktualizacje zapewniają pełną obsługę przeglądarek w postaci funkcji, na które czekaliśmy, co czyni je idealnymi do użytku produkcyjnego.
