Browser fügen ständig neue HTML-, JavaScript- und CSS-Funktionen hinzu. Hier sind einige nützliche Ergänzungen zum Arbeiten mit Formularen, die Sie möglicherweise übersehen haben …
requestSubmit()
Safari 16 wird der letzte Browser sein, für den Unterstützung hinzugefügt wird requestSubmit.
Bevor wir uns ansehen, wie .requestSubmit() funktioniert, erinnern wir uns daran, wie das programmgesteuerte Senden eines Formulars mit JavaScript funktioniert, wenn Sie die verwenden .submit() Methode. Senden eines Formulars mit submit() löst kein Sendeereignis aus. Im folgenden Code wird das Formular also übermittelt, preventDefault() hat keine Auswirkung und es wird nichts in der Konsole protokolliert:
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() ignoriert auch jede HTML-Formularvalidierung. Mit dem folgenden Markup wird das Formular gesendet, wenn die Eingabe leer ist, obwohl die Eingabe ein hat required Attribut:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() ist eine alternative Möglichkeit, ein Formular mit JavaScript zu senden, aber im Gegensatz zu .submit(), verhindert die HTML-Formularvalidierung, dass das Formular gesendet wird. Wenn alle in das Formular eingegebenen Daten die Validierung bestehen, wird die submit Ereignis wird ausgelöst, was „Formular übermittelt!“ bedeutet. würde im folgenden Beispiel an der Konsole protokolliert:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})Sie könnten dies bereits erreichen, indem Sie programmgesteuert auf die Schaltfläche „Senden“ des Formulars klicken, aber requestSubmit ist vielleicht eine elegantere Lösung.
submitter Eigenschaft des Submit-Ereignisses
Das SubmitEvent.submitter erworbenes Eigentum volle Cross-Browser-Unterstützung mit der Veröffentlichung von Safari 15.4. Diese schreibgeschützte Eigenschaft gibt die <button> or <input type="submit"> Element, das dazu geführt hat, dass ein Formular gesendet wurde.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>Wenn Sie mehrere Senden-Schaltflächen oder Eingaben mit jeweils unterschiedlichen Werten haben, wird nur der Wert der Schaltfläche oder Eingabe, auf die zum Senden des Formulars geklickt wurde, und nicht beide Werte an den Server gesendet. Das ist nichts Neues. Neu ist, dass der Event-Listener für das Submit-Event nun Zugriff auf die hat event.submitter Eigentum. Sie können dies verwenden, um beispielsweise der Schaltfläche oder Eingabe, die die Formularübermittlung ausgelöst hat, eine Klasse hinzuzufügen oder diese zu erhalten value oder jedes andere seiner HTML-Attribute.
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 Event
Das ist nicht besonders neu, aber nur Cross-Browser-Unterstützung erreicht mit der Veröffentlichung von Safari 15. Der Hauptanwendungsfall für die formdata event ermöglicht es benutzerdefinierten Elementen, an Formularübermittlungen teilzunehmen. Außerhalb von Webkomponenten kann es jedoch immer noch nützlich sein.
Sie fügen hinzu formdata Ereignis-Listener für das Formular, mit dem Sie interagieren möchten:
document.querySelector('form').addEventListener('formdata', handleFormdata);Das Ereignis wird sowohl durch eine reguläre HTML-Formularübermittlung als auch durch das Auftreten von ausgelöst new FormData(). event.formData enthält alle übermittelten Daten.
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}Die Callback-Funktion für die formdata Der Ereignis-Listener wird ausgeführt, bevor die Daten an den Server gesendet werden, sodass Sie die gesendeten Daten ergänzen oder ändern können.
function handleFormdata(event) {
event.formData.append('name', 'John');
}Sie hätten die ändern oder anhängen können FormData innerhalb des Submit-Event-Handlers aber formdata ermöglicht es Ihnen, die Logik zu trennen. Es ist auch eine Alternative zur Verwendung versteckter Eingaben im Markup Ihres Formulars in Fällen, in denen Sie das Formular „auf altmodische Weise“ senden – dh sich auf die integrierte Funktionalität von HTML verlassen, um das Formular zu senden, anstatt es zu tun fetch.
showPicker() für Eingabeelemente
showPicker() wurde unterstützt seit Chrome 99, Firefox 101 und im kommenden Safari 16. Für ein Eingabeelement, dessen type-Attribut entweder Date, Month, Week, Time ist, datetime-local, Farbe oder Datei, showPicker() bietet eine programmgesteuerte Möglichkeit zum Anzeigen der Auswahl-UI. Für Farb- und Dateieingaben war es immer möglich, die Auswahl programmgesteuert durch Aufrufen anzuzeigen .click am Eingang:
document.querySelector('input[type="color"]').click();Dieser Ansatz funktioniert nicht bei Datumseingaben, weshalb diese neue API hinzugefügt wurde. .showPicker() funktioniert auch mit Farb- und Dateieingaben, aber es hat keinen wirklichen Vorteil, es zu verwenden .click().
Inertes Attribut
Es war schon immer möglich, mehrere Eingaben gleichzeitig zu deaktivieren, indem man sie in einen HTML-Code einbettete fieldset und Deaktivieren der fieldset:
Inert ist ein neues HTML-Attribut. Es ist nicht nur für Formulare, aber Formulare sind sicherlich ein wichtiger Anwendungsfall. im Gegensatz zu den disabled Attribut, inert kann angewendet werden auf a form Element selbst. Alles innerhalb des Formulars ist nicht fokussierbar und nicht anklickbar. Wenn es um unterstützende Technologien geht, inert ist ähnlich wie Einstellung aria-hidden="true". nicht so wie disabled Attribut, inert wendet standardmäßig kein Styling an, aber es ist einfach, ein eigenes hinzuzufügen:
form[inert] {
opacity: .2;
}Da kommt noch mehr …
Das Größte ist das Styling <select> Elemente, etwas, das sich Entwickler seit Jahrzehnten wünschen. Es sieht so aus, als würde es bald mit der Einführung von endlich Realität werden selectmenu.
Aber das war es jetzt! Die jüngsten Updates bringen vollständige Browserunterstützung für Formularfunktionen, auf die wir gewartet haben, und machen sie zu einem idealen Produkt für den Einsatz in der Produktion.
