Browsers voegen voortdurend nieuwe HTML-, JavaScript- en CSS-functies toe. Hier zijn enkele nuttige toevoegingen aan het werken met formulieren die u misschien hebt gemist ...
requestSubmit()
Safari 16 zal de laatste browser zijn om ondersteuning voor toe te voegen requestSubmit.
Voordat we kijken naar hoe .requestSubmit() werkt, laten we ons eraan herinneren hoe programmatisch het indienen van een formulier met JavaScript werkt bij gebruik van de .submit() methode. Een formulier verzenden met submit() activeert geen verzendgebeurtenis. Dus in de volgende code wordt het formulier ingediend, preventDefault() heeft geen effect en er wordt niets vastgelegd op de console:
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() zal ook elke validatie van HTML-formulieren negeren. Gezien de volgende opmaak, wordt het formulier verzonden wanneer de invoer leeg is, ook al heeft de invoer een required attribuut:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() is een alternatieve manier om een formulier in te dienen met JavaScript, maar in tegenstelling tot: .submit(), zal HTML-formuliervalidatie voorkomen dat het formulier wordt ingediend. Als alle gegevens die in het formulier zijn ingevoerd validatie doorstaan, wordt de submit evenement wordt gestart, wat betekent "formulier ingediend!" zou in het volgende voorbeeld op de console worden gelogd:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})U kunt dit al bereiken door programmatisch op de verzendknop van het formulier te klikken, maar requestSubmit is misschien een elegantere oplossing.
submitter eigendom van gebeurtenis indienen
De SubmitEvent.submitter eigendom verkregen volledige ondersteuning voor meerdere browsers met de release van Safari 15.4. Deze alleen-lezen eigenschap specificeert de <button> or <input type="submit"> element dat ervoor zorgde dat een formulier werd ingediend.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>Als u meerdere verzendknoppen of invoer hebt, elk met een andere waarde, wordt alleen de waarde van de knop of invoer waarop is geklikt om het formulier in te dienen naar de server verzonden, in plaats van beide waarden. Dat is niets nieuws. Wat nieuw is, is dat de gebeurtenislistener voor het indienen van de gebeurtenis nu toegang heeft tot de event.submitter eigendom. U kunt dit gebruiken om bijvoorbeeld een klasse toe te voegen aan de knop of invoer die de indiening van het formulier heeft geactiveerd, of om zijn value of een van de andere HTML-kenmerken ervan.
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 gebeurtenis
Dit is niet bijzonder nieuw, maar alleen ondersteuning voor meerdere browsers bereikt met de release van Safari 15. De belangrijkste use-case voor de formdata evenement maakt het mogelijk dat aangepaste elementen deelnemen aan formulierinzendingen. Buiten webcomponenten kan het echter nog steeds nuttig zijn.
Je voegt een toe formdata gebeurtenislistener naar het formulier waarmee u wilt communiceren:
document.querySelector('form').addEventListener('formdata', handleFormdata);De gebeurtenis wordt geactiveerd door zowel een normale HTML-formulierinzending als ook door het voorkomen van new FormData(). event.formData bevat alle gegevens die worden ingediend.
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}De callback-functie voor de formdata event listener wordt uitgevoerd voordat de gegevens naar de server worden verzonden, zodat u de verzonden gegevens kunt aanvullen of wijzigen.
function handleFormdata(event) {
event.formData.append('name', 'John');
}U had de . kunnen wijzigen of toevoegen FormData in de verzend-gebeurtenis-handler maar formdata stelt u in staat om de logica te scheiden. Het is ook een alternatief voor het gebruik van verborgen invoer in de opmaak van uw formulier in gevallen waarin u het formulier "op de ouderwetse manier" indient - dat wil zeggen dat u vertrouwt op de ingebouwde functionaliteit van HTML om het formulier in te dienen in plaats van het te doen met fetch.
showPicker() voor invoerelementen
showPicker() is ondersteund sinds Chrome 99, Firefox 101 en in de komende Safari 16. Voor een invoerelement waarvan het typekenmerk Datum, Maand, Week, Tijd, datetime-local, kleur of bestand, showPicker() biedt een programmatische manier om de selectie-UI weer te geven. Voor kleur- en bestandsinvoer is het altijd mogelijk geweest om de kiezer programmatisch te tonen door te bellen .click op de ingang:
document.querySelector('input[type="color"]').click();Die aanpak werkt niet op datuminvoer, daarom is deze nieuwe API toegevoegd. .showPicker() werkt ook met kleur- en bestandsinvoer, maar het heeft geen echt voordeel om het te gebruiken .click().
Inert attribuut
Het is altijd mogelijk geweest om meerdere invoer tegelijk uit te schakelen door ze in een HTML te verpakken fieldset en het uitschakelen van de fieldset:
Inert is een nieuw HTML-attribuut. Het is niet alleen voor formulieren, maar formulieren zijn zeker een belangrijke use-case. In tegenstelling tot de disabled attribuut, inert kan worden toegepast op een form element zelf. Alles in het formulier kan niet worden gefocust en kan niet worden geklikt. Als het gaat om ondersteunende technologieën, inert is vergelijkbaar met instelling aria-hidden="true". In tegenstelling tot de disabled attribuut, inert past standaard geen stijl toe, maar het is gemakkelijk om uw eigen stijl toe te voegen:
form[inert] {
opacity: .2;
}Er komt nog meer…
De grote is styling <select> elementen, iets wat ontwikkelaars al tientallen jaren willen. Het lijkt erop dat het binnenkort werkelijkheid zal worden met de introductie van selectmenu.
Maar dat is het voor nu! De recente updates bieden volledige browserondersteuning om functies te vormen waar we op hebben gewacht, waardoor ze ideaal zijn voor productiegebruik.
