Brauserid lisavad pidevalt uusi HTML-i, JavaScripti ja CSS-i funktsioone. Siin on mõned kasulikud täiendused vormidega töötamiseks, millest võisite tähelepanuta jätta…
requestSubmit()
Safari 16 on viimane brauser, millele toe lisada requestSubmit.
Enne kui vaatame, kuidas .requestSubmit() toimib, tuletagem meelde, kuidas JavaScriptiga vormi programmiline esitamine rakenduse kasutamisel toimib .submit() meetod. Vormi esitamine koos submit() ei käivita esitamissündmust. Nii et järgmises koodis esitatakse vorm, preventDefault() ei mõjuta ja konsooli ei logita midagi sisse:
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() ignoreerib ka HTML-vormingu kinnitamist. Arvestades järgmist märgistust, esitatakse vorm siis, kui sisend on tühi, kuigi sisendil on a required atribuut:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() on alternatiivne viis vormi esitamiseks JavaScripti kasutades, kuid erinevalt .submit(), HTML-vormi valideerimine takistab vormi esitamist. Kui kõik vormile sisestatud andmed läbivad valideerimise, siis submit sündmus vallandatakse, mis tähendab "vorm on esitatud!" logitakse konsooli järgmises näites:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})Saate seda juba saavutada, kui klõpsate programmiliselt vormi saatmisnupul, kuid requestSubmit on ehk elegantsem lahendus.
submitter esitamise sündmuse omadus
. SubmitEvent.submitter saadud vara täielik brauseriülene tugi koos Safari 15.4 väljalaskega. See kirjutuskaitstud atribuut määrab <button> or <input type="submit"> element, mis põhjustas vormi esitamise.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>Kui teil on mitu saatmisnuppu või sisendit, millest igaühel on erinev väärtus, saadetakse serverisse ainult selle nupu või sisendi väärtus, millel vormi esitamiseks klõpsati, mitte mõlema väärtuse. See pole midagi uut. Uus on see, et edastatava sündmuse sündmusekuulajal on nüüd juurdepääs event.submitter vara. Seda saab kasutada näiteks klassi lisamiseks nupule või sisendile, mis käivitas vormi esitamise, või hankida selle value või mõni muu selle HTML-i atribuut.
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 sündmus
See pole eriti uus, aga ainult saavutanud brauseriülese toe Safari 15 väljalaskega. Peamine kasutusjuhtum formdata sündmus võimaldab kohandatud elementidel osaleda vormi esitamisel. Väljaspool veebikomponente võib see siiski kasulik olla.
Lisate a formdata sündmusekuulaja vormile, millega soovite suhelda:
document.querySelector('form').addEventListener('formdata', handleFormdata);Sündmuse käivitab nii tavaline HTML-vormingu esitamine kui ka esinemine new FormData(). event.formData sisaldab kõiki esitatavaid andmeid.
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}Tagasihelistamise funktsioon formdata sündmuste kuulaja töötab enne andmete serverisse saatmist, mis annab teile võimaluse saadetavaid andmeid lisada või muuta.
function handleFormdata(event) {
event.formData.append('name', 'John');
}Oleksite võinud muuta või lisada FormData Sündmuse esitamise töötleja sees, kuid formdata võimaldab teil loogikat eraldada. See on ka alternatiiv peidetud sisendite kasutamisele vormi märgistuses juhtudel, kui saadate vormi "vanal moel" – st tuginete vormi esitamisel HTML-i sisseehitatud funktsioonidele, mitte ei tee seda fetch.
showPicker() sisendelementide jaoks
showPicker() olnud toetab alates versioonist Chrome 99, Firefox 101 ja eelseisvas Safaris 16. Sisendelemendi puhul, mille tüübiatribuut on kas kuupäev, kuu, nädal, kellaaeg, datetime-local, värv või fail, showPicker() pakub programmilist viisi valiku kasutajaliidese kuvamiseks. Värvi- ja failisisendite puhul on alati olnud võimalik valijat programmiliselt näidata helistades .click sisendil:
document.querySelector('input[type="color"]').click();See lähenemisviis ei tööta kuupäeva sisestamisel, mistõttu lisati see uus API. .showPicker() töötab ka värvi- ja failisisenditega, kuid selle kasutamisel pole tegelikku eelist .click().
Inertne atribuut
Alati on olnud võimalik mitut sisendit korraga keelata, mähkides need HTML-i fieldset ja keelata fieldset:
Inert on uus HTML-i atribuut. See pole mõeldud ainult vormide jaoks, vaid vormid on kindlasti võtmekasutusjuht. Erinevalt sellest disabled atribuut, inert saab rakendada a form element ise. Kõik vormis olevad asjad ei ole fookustavad ega klõpsatavad. Kui rääkida abitehnoloogiatest, inert on seadistamisega sarnane aria-hidden="true". Erinevalt disabled atribuut, inert ei rakenda vaikimisi ühtegi stiili, kuid seda on lihtne lisada:
form[inert] {
opacity: .2;
}Tulemas on veel…
Suurim on stiil <select> elemendid, mida arendajad on aastakümneid soovinud. Tundub, et see saab lõpuks peagi reaalsuseks pärast selle kasutuselevõttu selectmenu.
Aga see selleks korraks! Hiljutised värskendused toovad kaasa täieliku brauseri toe funktsioonidele, mida oleme oodanud, muutes need tootmiskasutuseks esmatähtsaks.
