Browsere tilføjer konstant nye HTML-, JavaScript- og CSS-funktioner. Her er nogle nyttige tilføjelser til at arbejde med formularer, som du måske er gået glip af...
requestSubmit()
Safari 16 vil være den sidste browser at tilføje support til requestSubmit.
Før vi ser på hvordan .requestSubmit() virker, lad os minde os selv om, hvordan det fungerer, når du bruger den programmatiske indsendelse af en formular med JavaScript .submit() metode. Indsendelse af en formular med submit() udløser ikke en indsendelsesbegivenhed. Så i den følgende kode indsendes formularen, preventDefault() har ingen effekt, og intet er logget på konsollen:
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() vil også ignorere enhver HTML-formularvalidering. Givet følgende opmærkning vil formularen blive indsendt, når inputtet er tomt, selvom inputtet har en required attribut:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() er en alternativ måde at indsende en formular ved hjælp af JavaScript, men i modsætning til .submit(), HTML-formularvalidering forhindrer formularen i at blive indsendt. Hvis alle de data, der er indtastet i formularen, består valideringen, submit begivenhed vil blive affyret, hvilket betyder "formular indsendt!" vil blive logget på konsollen i følgende eksempel:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})Du kan allerede nå dette ved at klikke på formularens indsend-knap, men requestSubmit er måske en mere elegant løsning.
submitter ejendom af indsende begivenhed
SubmitEvent.submitter erhvervet ejendom fuld cross-browser support med udgivelsen af Safari 15.4. Denne skrivebeskyttede egenskab specificerer <button> or <input type="submit"> element, der forårsagede, at en formular blev indsendt.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>Når du har flere indsend-knapper eller input, hver med en forskellig værdi, vil kun værdien af knappen eller input, der blev klikket på for at indsende formularen, blive sendt til serveren i stedet for begge værdier. Det er ikke noget nyt. Det nye er, at begivenhedslytteren for den indsende begivenhed nu har adgang til event.submitter ejendom. Du kan bruge dette til f.eks. at tilføje en klasse til knappen eller input, der udløste formularindsendelsen, eller for at få dens value eller enhver anden af dens HTML-attributter.
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 begivenhed
Dette er ikke specielt nyt, men kun opnået cross-browser support med udgivelsen af Safari 15. Den vigtigste brugssag for formdata begivenheden gør det muligt for tilpassede elementer at deltage i formularindsendelser. Uden for webkomponenter kan det dog stadig være nyttigt.
Du tilføjer en formdata begivenhedslytter til den formular, du vil interagere med:
document.querySelector('form').addEventListener('formdata', handleFormdata);Begivenheden udløses både af en almindelig HTML-formularindsendelse og også af en forekomst af new FormData(). event.formData opbevarer alle de data, der indsendes.
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}Tilbagekaldsfunktionen til formdata hændelseslytter kører, før dataene sendes til serveren, hvilket giver dig mulighed for at tilføje til eller ændre de data, der sendes.
function handleFormdata(event) {
event.formData.append('name', 'John');
}Du kunne have ændret eller tilføjet FormData inde i indsend hændelseshandleren men formdata giver dig mulighed for at adskille logikken. Det er også et alternativ til at bruge skjulte input i opmærkningen af din formular i tilfælde, hvor du indsender formularen "på gammeldags måde" - dvs. stole på den indbyggede funktionalitet i HTML til at indsende formularen i stedet for at gøre det med fetch.
showPicker() for input-elementer
showPicker() har været understøttes siden Chrome 99, Firefox 101 og i den kommende Safari 16. For et inputelement, hvis typeattribut er enten Dato, Month, Week, Time, datetime-local, farve eller fil, showPicker() giver en programmatisk måde at vise valg-UI. For farve- og filinput har det altid været muligt at programmæssigt vise vælgeren ved at ringe .click på input:
document.querySelector('input[type="color"]').click();Den tilgang virker ikke på datoinput, hvorfor denne nye API blev tilføjet. .showPicker() vil også fungere med farve- og filinput, men der er ingen reel fordel ved at bruge det over .click().
Inert attribut
Det har altid været muligt at deaktivere flere input på én gang ved at pakke dem ind i en HTML fieldset og deaktivering af fieldset:
Inert er en ny HTML-attribut. Det er ikke kun til formularer, men formularer er bestemt en vigtig use-case. I modsætning til disabled egenskab, inert kan anvendes på en form selve elementet. Alt i formularen vil være ikke-fokuserbart og ikke-klikbart. Når det kommer til hjælpeteknologier, inert svarer til indstilling aria-hidden="true". I modsætning til disabled egenskab, inert anvender ikke nogen styling som standard, men det er nemt at tilføje din egen:
form[inert] {
opacity: .2;
}Der kommer mere…
Den store er styling <select> elementer, noget udviklere har ønsket sig i årtier. Det ser ud til endelig at blive en realitet engang snart med introduktionen af selectmenu.
Men det er det for nu! De seneste opdateringer bringer fuld browserunderstøttelse til at danne funktioner, vi har ventet på, hvilket gør dem ideelle til produktionsbrug.
