HTMLFormElement
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Das HTMLFormElement Interface repräsentiert ein Element im DOM. Es ermöglicht den Zugriff auf – und in manchen Fällen die Modifikation von – Aspekten des Formulars sowie den Zugriff auf seine Komponenten.
Instanz-Eigenschaften
Dieses Interface erbt auch Eigenschaften von seinem Elternteil, HTMLElement.
HTMLFormElement.acceptCharset-
Ein String, der den Wert des
accept-charsetHTML-Attributs des Formulars widerspiegelt. HTMLFormElement.action-
Ein String, der den Wert des
actionHTML-Attributs des Formulars widerspiegelt und die URI eines Programms enthält, das die vom Formular übermittelten Informationen verarbeitet. HTMLFormElement.autocomplete-
Ein String, der den Wert des
autocompleteHTML-Attributs des Formulars widerspiegelt und angibt, ob die Steuerungen in diesem Formular ihre Werte automatisch vom Browser bevölkert haben können. HTMLFormElement.encodingoderHTMLFormElement.enctype-
Ein String, der den Wert des
enctypeHTML-Attributs des Formulars widerspiegelt und den Typ des Inhalts angibt, der verwendet wird, um das Formular an den Server zu übertragen. Nur spezifizierte Werte können gesetzt werden. Die beiden Eigenschaften sind Synonyme. HTMLFormElement.elementsSchreibgeschützt-
Eine
HTMLFormControlsCollection, die alle zu diesem Formularelement gehörenden Formularelemente enthält. HTMLFormElement.lengthSchreibgeschützt-
Ein
long, das die Anzahl der Steuerungen im Formular widerspiegelt. HTMLFormElement.name-
Ein String, der den Wert des
nameHTML-Attributs des Formulars widerspiegelt und den Namen des Formulars enthält. HTMLFormElement.noValidate-
Ein Boolescher Wert, der den Wert des
novalidateHTML-Attributs des Formulars widerspiegelt und angibt, ob das Formular nicht validiert werden soll. HTMLFormElement.method-
Ein String, der den Wert des
methodHTML-Attributs des Formulars widerspiegelt und die HTTP-Methode angibt, die zur Übermittlung des Formulars verwendet wird. Nur spezifizierte Werte können gesetzt werden. HTMLFormElement.rel-
Ein String, der den Wert des
relHTML-Attributs des Formulars widerspiegelt und angibt, welche Arten von Links das Formular erstellt, als durch Leerzeichen getrennte Liste von aufgezählten Werten. HTMLFormElement.relListSchreibgeschützt-
Eine
DOMTokenList, die dasrelHTML-Attribut als Liste von Tokens widerspiegelt. HTMLFormElement.target-
Ein String, der den Wert des
targetHTML-Attributs des Formulars widerspiegelt und angibt, wo die Ergebnisse der Formulareinreichung angezeigt werden sollen.
Benannte Eingaben werden als Eigenschaften zu ihrer Eigentümerformularinstanz hinzugefügt und können native Eigenschaften überschreiben, wenn sie denselben Namen haben (z. B. ein Formular mit einer Eingabe namens action wird die action-Eigenschaft dieser Eingabe anstelle des action HTML-Attributs des Formulars zurückgeben).
Instanz-Methoden
Dieses Interface erbt auch Methoden von seinem Elternteil, HTMLElement.
checkValidity()-
Gibt
truezurück, wenn die Kindelemente des Formulars einer Einschränkungsvalidierung unterliegen und diese einschränkungen erfüllen; gibtfalsezurück, wenn einige Steuerungen ihre Einschränkungen nicht erfüllen. Löst ein Ereignis mit dem Nameninvalidfür jedes Steuerelement aus, das seine Einschränkungen nicht erfüllt; solche Steuerungen gelten als ungültig, wenn das Ereignis nicht abgebrochen wird. Es liegt am Programmierer zu entscheiden, wie auffalsereagiert wird. reportValidity()-
Gibt
truezurück, wenn die Kindelemente des Formulars ihre Validierungseinschränkungen erfüllen. Wennfalsezurückgegeben wird, werden abbrechbareinvalidEreignisse für jedes ungültige Kind ausgelöst und Validierungsprobleme dem Benutzer gemeldet. requestSubmit()-
Fordert an, dass das Formular unter Verwendung des angegebenen Übermittlungsschalters und seiner entsprechenden Konfiguration übermittelt wird.
reset()-
Setzt das Formular auf seinen ursprünglichen Zustand zurück.
submit()-
Übermittelt das Formular an den Server.
Ereignisse
Diese Ereignisse können mit addEventListener() abgehört werden oder indem ein Ereignislistener der oneventname Eigenschaft dieses Interfaces zugewiesen wird.
Nutzungshinweise
Ein Objektelement des Formulars abrufen
Um ein HTMLFormElement-Objekt zu erhalten, können Sie einen CSS-Selektor mit querySelector() verwenden, oder Sie können eine Liste aller Formulare im Dokument über die forms Eigenschaft des Dokuments abrufen.
Document.forms gibt ein Array von HTMLFormElement Objekten zurück, das jedes der Formulare auf der Seite auflistet. Sie können dann eine der folgenden Syntaxen verwenden, um ein individuelles Formular zu erhalten:
document.forms[index]-
Gibt das Formular am angegebenen
indexim Array der Formulare zurück. document.forms[id]-
Gibt das Formular zurück, dessen ID
idist. document.forms[name]-
Gibt das Formular zurück, dessen
name-Attribut den Wertnamehat.
Zugriff auf die Elemente des Formulars
Sie können auf die Liste der datentragenden Elemente des Formulars zugreifen, indem Sie die elements Eigenschaft des Formulars untersuchen. Dies gibt eine HTMLFormControlsCollection zurück, die alle Benutzerdateneintrags-Elemente des Formulars auflistet, sowohl diejenigen, die Nachkommen des sind als auch diejenigen, die durch ihr form-Attribut zum Formular gemacht wurden.
Sie können auch auf das Element des Formulars zugreifen, indem Sie dessen name-Attribut als Schlüssel des form verwenden, aber die Verwendung von elements ist ein besserer Ansatz – es enthält nur die Elemente des Formulars und kann nicht mit anderen Attributen des form vermischt werden.
Probleme beim Benennen von Elementen
Einige Namen werden den JavaScript-Zugriff auf die Eigenschaften und Elemente des Formulars beeinträchtigen.
Zum Beispiel:
wird Vorrang vorhaben. Das bedeutet, dassform.idsich nicht auf die ID des Formulars beziehen wird, sondern auf das Element, dessen Name"id"ist. Dies wird auch bei anderen Formulareigenschaften der Fall sein, wieoder.wird dieelements-Sammlung des Formulars unzugänglich machen. Der Verweisform.elementswird jetzt auf das individuelle Element verweisen.
Um solche Probleme mit Elementnamen zu vermeiden:
- Immer die
elements-Sammlung verwenden, um Mehrdeutigkeiten zwischen einem Elementnamen und einer Formulareigenschaft zu vermeiden. - Niemals
"elements"als Elementnamen verwenden.
Wenn Sie kein JavaScript verwenden, wird dies kein Problem verursachen.
Elemente, die als Formularelemente betrachtet werden
Die von HTMLFormElement.elements und HTMLFormElement.length eingeschlossenen Elemente sind die folgenden:
(mit der Ausnahme, dass alle, derentype"image"ist, aus historischen Gründen weggelassen werden)
document.getElementById("info").addEventListener("click", () => {
// Get a reference to the form via its name
const f = document.forms["formA"];
// The form properties we're interested in
const properties = [
"elements",
"length",
"name",
"charset",
"action",
"acceptCharset",
"action",
"enctype",
"method",
"target",
];
// Iterate over the properties, turning them into a string that we can display to the user
const info = properties
.map((property) => `${property}: ${f[property]}`)
.join("\n");
// Set the form's \n\n\njsdocument.getElementById(\"info\").addEventListener(\"click\", () => {\n // Get a reference to the form via its name\n const f = document.forms[\"formA\"];\n // The form properties we're interested in\n const properties = [\n \"elements\",\n \"length\",\n \"name\",\n \"charset\",\n \"action\",\n \"acceptCharset\",\n \"action\",\n \"enctype\",\n \"method\",\n \"target\",\n ];\n // Iterate over the properties, turning them into a string that we can display to the user\n const info = properties\n .map((property) => `${property}: ${f[property]}`)\n .join(\"\\n\");\n\n // Set the form's