A böngészők folyamatosan új HTML, JavaScript és CSS funkciókat adnak hozzá. Íme néhány hasznos kiegészítés az űrlapokkal való munkavégzéshez, amelyeket esetleg kihagyott…
requestSubmit()
Safari 16 lesz az utolsó böngésző, amelyhez támogatást kell hozzáadni requestSubmit.
Mielőtt megnéznénk, hogyan .requestSubmit() működik, emlékeztessük magunkat, hogyan működik egy űrlap programozott beküldése JavaScript használatával a .submit() módszer. Űrlap beküldése a submit() nem indít elküldési eseményt. Tehát a következő kódban az űrlap elküldésre kerül, preventDefault() nincs hatása, és semmi sem kerül naplózásra a konzolon:
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() figyelmen kívül hagyja a HTML űrlap érvényesítését is. A következő jelölést figyelembe véve az űrlap akkor kerül elküldésre, ha a bemenet üres, annak ellenére, hogy a bemenet rendelkezik a required tulajdonság:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() egy alternatív módja az űrlap beküldésének JavaScript használatával, de ezzel ellentétben .submit(), A HTML űrlap érvényesítése megakadályozza az űrlap elküldését. Ha az űrlapon megadott összes adat átmegy az érvényesítésen, a submit esemény ki lesz rúgva, ami azt jelenti, hogy „űrlap beküldve!” a következő példában naplózzák a konzolra:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})Ezt már elérheti, ha programozottan kattint az űrlap elküldése gombjára, de requestSubmit talán elegánsabb megoldás.
submitter az esemény benyújtásának tulajdonsága
A SubmitEvent.submitter szerzett ingatlan teljes, több böngésző támogatás a Safari 15.4 kiadásával. Ez a csak olvasható tulajdonság határozza meg a <button> or <input type="submit"> elem, amely egy űrlap elküldését okozta.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>Ha több elküldő gombja vagy bemenete van, mindegyik más értékkel, akkor csak annak a gombnak vagy bemenetnek az értéke kerül elküldésre a szervernek, amelyre az űrlap elküldéséhez kattintottak, és nem mindkét érték. Ez nem újdonság. Az újdonság az, hogy a beküldő esemény eseményfigyelője mostantól hozzáfér a event.submitter ingatlan. Ezzel például hozzáadhat egy osztályt ahhoz a gombhoz vagy bemenethez, amely kiváltotta az űrlap elküldését, vagy lekérheti a value vagy bármely más HTML attribútuma.
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 esemény
Ez nem különösebben új, de csak elérte a böngészők közötti támogatást a Safari 15 kiadásával. A fő használati eset a formdata Az esemény lehetővé teszi az egyéni elemek részvételét az űrlapok beküldésében. A webes összetevőkön kívül azonban még mindig hasznos lehet.
Hozzáadsz a formdata eseményfigyelő ahhoz az űrlaphoz, amellyel kapcsolatba szeretne lépni:
document.querySelector('form').addEventListener('formdata', handleFormdata);Az eseményt egy szokásos HTML űrlap beküldése és egy előfordulása is elindítja new FormData(). event.formData tartalmazza az összes benyújtott adatot.
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}A visszahívási funkció a formdata Az eseményfigyelő lefut, mielőtt az adatokat elküldené a szervernek, így lehetőség nyílik a küldendő adatok hozzáadására vagy módosítására.
function handleFormdata(event) {
event.formData.append('name', 'John');
}Módosíthatta vagy hozzáfűzhette volna a FormData az elküldés eseménykezelőjén belül, de formdata lehetővé teszi a logika elkülönítését. Alternatíva a rejtett bemenetek használatára az űrlap jelölésében olyan esetekben, amikor az űrlapot „régi módon” küldi be – azaz a HTML beépített funkcióira hagyatkozik az űrlap elküldésekor, nem pedig fetch.
showPicker() bemeneti elemekhez
showPicker() már támogatott a Chrome 99, a Firefox 101 és a közelgő Safari 16 óta. Olyan beviteli elem esetén, amelynek típusattribútuma Dátum, Hónap, Hét, Idő, datetime-local, szín vagy fájl, showPicker() programozott módot biztosít a kiválasztási felhasználói felület megjelenítésére. Szín- és fájlbevitel esetén mindig is lehetséges volt a picker programozott megjelenítése hívással .click a bemeneten:
document.querySelector('input[type="color"]').click();Ez a megközelítés nem működik dátumbevitellel, ezért került hozzáadásra az új API. .showPicker() szín- és fájlbevitellel is működik, de nincs valódi előnye a használatának .click().
Inert attribútum
Mindig is lehetséges volt egyszerre több bemenet letiltása HTML-be csomagolva fieldset és letiltja a fieldset:
Az inert egy új HTML attribútum. Ez nem csak az űrlapokra vonatkozik, de az űrlapok minden bizonnyal kulcsfontosságú felhasználási esetek. ellentétben a disabled tulajdonság, inert alkalmazható a form maga az elem. Az űrlapon belül minden nem fókuszálható és nem kattintható. Ha a kisegítő technológiákról van szó, inert beállításhoz hasonló aria-hidden="true". ellentétben a disabled tulajdonság, inert alapértelmezés szerint nem alkalmaz semmilyen stílust, de könnyen hozzáadhat saját stílust:
form[inert] {
opacity: .2;
}Jön még…
A nagy a styling <select> elemeket, amire a fejlesztők évtizedek óta vágytak. Úgy tűnik, hogy a bevezetéssel hamarosan valósággá válik selectmenu.
De egyenlőre ennyi! A legutóbbi frissítések teljes böngésző-támogatást biztosítanak az általunk várt funkciókhoz, így azok elsőrendűek az éles használatra.
