Was können wir 2022 mit Formularen machen? / Sudo Null IT-Nachrichten

Dieser Artikel ist eine Übersetzung des Originalartikels von Ollie Williams “Was ist neu bei Formularen im Jahr 2022?

Ich betreibe auch einen TelegrammkanalFrontend auf Marine-Art“, wo ich über interessante Dinge aus der Welt der Schnittstellenentwicklung spreche.

Einführung

Browser fügen ständig neue Funktionen zu HTML, JavaScript und CSS hinzu. Hier sind einige nützliche Ergänzungen zum Arbeiten mit Formularen, die Sie vielleicht übersehen haben…

AnfrageSubmit()

Safari 16 wird der letzte Browser sein, der Unterstützung hinzufügt anfordernSenden.

Bevor wir uns ansehen, wie es funktioniert .requestSubmit()erinnern wir uns daran, wie das programmgesteuerte Senden eines Formulars mit JavaScript funktioniert, wenn die Methode verwendet wird .einreichen(). Senden eines Formulars mit einreichen() löst das Submit-Ereignis nicht aus. Daher wird im folgenden Code das Formular gesendet, die Funktion preventDefault() wird nicht ausgeführt und es wird nichts in die Konsole geschrieben:

const form = document.forms[0]; form.addEventListener(‘submit’, function(event) { // Code zum Absenden des Formulars kommt hier event.preventDefault(); console.log(‘Formular gesendet!’); }); document.querySelector(‘.btn’).addEventListener(‘click’, function() { form.submit(); })

.einreichen() ignoriert auch jede HTML-Formularvalidierung. Bei folgendem Markup wird das Formular gesendet, wenn die Eingabe leer ist, selbst wenn die Eingabe ein erforderliches Attribut hat:

.requestSubmit() ist eine alternative Möglichkeit, ein Formular mit JavaScript zu senden, aber anders .einreichen(), verhindert die Validierung des HTML-Formulars, dass das Formular gesendet wird. Wenn alle in das Formular eingegebenen Daten die Validierung bestehen, wird das Sendeereignis ausgelöst, was “Formular gesendet!” bedeutet. wird im folgenden Beispiel auf der Konsole ausgegeben:

form.addEventListener(‘submit’, function(event) { event.preventDefault(); console.log(‘Formular übermittelt!’); }); document.querySelector(‘.btn’).addEventListener(‘click’, function() { form.requestSubmit(); })

Sie können den gleichen Effekt erzielen, indem Sie auf den Absenden-Button des Formulars klicken, aber anfordernSendenist vielleicht eine elegantere Lösung.

Die Submitter-Eigenschaft des Submit-Ereignisses

Eigentum SubmitEvent.submitter erhalten volle Cross-Browser-Unterstützung mit der Veröffentlichung von Safari 15.4. Diese schreibgeschützte Eigenschaft gibt das Element < /formular>

Wenn Sie mehrere Senden-Schaltflächen oder Eingaben haben, die jeweils einen anderen Wert haben, wird nur der Wert der Schaltfläche oder Eingabe, auf die zum Senden des Formulars geklickt wurde, an den Server gesendet, nicht beide. Nichts Neues. Neu ist, dass der Event-Listener für das Submit-Event jetzt Property-Zugriff hat event.submitter. Sie können dies verwenden, um beispielsweise eine Klasse zu der Schaltfläche oder Eingabe hinzuzufügen, die die Formularübermittlung initiiert hat, oder um ihren Wert oder eines ihrer anderen HTML-Attribute abzurufen.

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-Ereignis

Das ist nichts Neues, aber Cross-Browser-Unterstützung wurde erreicht erst mit der Veröffentlichung von Safari 15. Der Hauptanwendungsfall für das formdata-Ereignis besteht darin, benutzerdefinierten Elementen die Teilnahme an Formularübermittlungen zu ermöglichen. Außerhalb von Webkomponenten kann es jedoch immer noch nützlich sein.

Sie fügen dem Formular, mit dem Sie interagieren möchten, einen formdata-Ereignis-Listener hinzu:

document.querySelector(‘form’).addEventListener(‘formdata’, handleFormdata);

Das Ereignis wird sowohl durch eine normale HTML-Formularübermittlung als auch durch das Erscheinen von ausgelöst neue FormData().event.formData enthält alle gesendeten Daten.

function handleFormdata(event) { for (const entry of event.formData.values()) { console.log(entry); } }

Der Rückruf des Formdata-Ereignis-Listeners wird ausgelöst, bevor die Daten an den Server gesendet werden, sodass Sie die Möglichkeit haben, die gesendeten Daten hinzuzufügen oder zu ändern.

function handleFormdata(event) { event.formData.append(‘name’, ‘John’); }

Sie könnten FormData innerhalb des Submit-Event-Handlers ändern oder hinzufügen, aber formdata ermöglicht es Ihnen, die Logik zu trennen. Es ist auch eine Alternative zur Verwendung versteckter Eingaben in Ihrem Formular-Markup in Fällen, in denen Sie das Formular auf die „altmodische“ Weise übermitteln, d.

showPicker() für Eingabeelement

showPicker() unterstützt beginnend mit Chrome 99, Firefox 101 und dem kommenden Safari 16. Für ein Eingabeelement, dessen type-Attribut Date, Month, Week, Time, datetime-local, color oder file ist, bietet showPicker() eine programmgesteuerte Möglichkeit, die Auswahl anzuzeigen Benutzeroberfläche. Für die Farb- und Dateieingabe war es immer möglich, die Auswahl programmgesteuert durch Aufrufen von anzuzeigen.klicken bei Eingabe:

document.querySelector(‘eingabe[type=”color”]’).klicken();

Dieser Ansatz funktioniert nicht für die Datumseingabe, daher wurde diese neue API hinzugefügt. .showPicker() funktioniert auch mit Farb- und Dateieingaben, aber es hat keinen wirklichen Vorteil, es zu verwenden .klicken().

Inertes Attribut

Es war immer möglich, mehrere Eingaben gleichzeitig zu deaktivieren, indem man sie in ein Fieldset mit dem Attribut disabled einschloss:

Inert ist ein neues HTML-Attribut. Es funktioniert nicht nur mit Formularen, aber Formulare sind definitiv ein wichtiger Anwendungsfall. Im Gegensatz zum Attribut disabled kann inert auf das Formularelement selbst angewendet werden. Alles im Formular ist unfokussierbar und anklickbar. Wenn es um Hilfstechnologien geht, ist inert dasselbe wie das Setzen von aria-hidden=”true”. Im Gegensatz zum Attribut disabled wendet inert standardmäßig kein Styling an, aber es ist einfach, sie selbst hinzuzufügen:

bilden[inert] {Deckkraft: 0,2; }