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-charset
HTML-Attributs des Formulars widerspiegelt. HTMLFormElement.action
-
Ein String, der den Wert des
action
HTML-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
autocomplete
HTML-Attributs des Formulars widerspiegelt und angibt, ob die Steuerungen in diesem Formular ihre Werte automatisch vom Browser bevölkert haben können. HTMLFormElement.encoding
oderHTMLFormElement.enctype
-
Ein String, der den Wert des
enctype
HTML-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.elements
Schreibgeschützt-
Eine
HTMLFormControlsCollection
, die alle zu diesem Formularelement gehörenden Formularelemente enthält. HTMLFormElement.length
Schreibgeschützt-
Ein
long
, das die Anzahl der Steuerungen im Formular widerspiegelt. HTMLFormElement.name
-
Ein String, der den Wert des
name
HTML-Attributs des Formulars widerspiegelt und den Namen des Formulars enthält. HTMLFormElement.noValidate
-
Ein Boolescher Wert, der den Wert des
novalidate
HTML-Attributs des Formulars widerspiegelt und angibt, ob das Formular nicht validiert werden soll. HTMLFormElement.method
-
Ein String, der den Wert des
method
HTML-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
rel
HTML-Attributs des Formulars widerspiegelt und angibt, welche Arten von Links das Formular erstellt, als durch Leerzeichen getrennte Liste von aufgezählten Werten. HTMLFormElement.relList
Schreibgeschützt-
Eine
DOMTokenList
, die dasrel
HTML-Attribut als Liste von Tokens widerspiegelt. HTMLFormElement.target
-
Ein String, der den Wert des
target
HTML-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
true
zurück, wenn die Kindelemente des Formulars einer Einschränkungsvalidierung unterliegen und diese einschränkungen erfüllen; gibtfalse
zurück, wenn einige Steuerungen ihre Einschränkungen nicht erfüllen. Löst ein Ereignis mit dem Nameninvalid
fü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 auffalse
reagiert wird. reportValidity()
-
Gibt
true
zurück, wenn die Kindelemente des Formulars ihre Validierungseinschränkungen erfüllen. Wennfalse
zurückgegeben wird, werden abbrechbareinvalid
Ereignisse 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
index
im Array der Formulare zurück. document.forms[id]
-
Gibt das Formular zurück, dessen ID
id
ist. document.forms[name]
-
Gibt das Formular zurück, dessen
name
-Attribut den Wertname
hat.
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 vor
haben. Das bedeutet, dass
form.id
sich 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 die
elements
-Sammlung des Formulars unzugänglich machen. Der Verweisform.elements
wird 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, deren
type
"image"
ist, aus historischen Gründen weggelassen werden)
Keine anderen Elemente sind in der von elements
zurückgegebenen Liste enthalten, was es zu einem ausgezeichneten Mittel macht, um an die wichtigsten Elemente bei der Verarbeitung von Formularen zu gelangen.
Beispiele
Ein neues Formularelement erstellen, seine Attribute ändern und es dann absenden:
const f = document.createElement("form"); // Create a form
document.body.appendChild(f); // Add it to the document body
f.action = "/cgi-bin/some.cgi"; // Add action and method attributes
f.method = "POST";
f.submit(); // Call the form's submit() method
Informationen aus einem -Element extrahieren und einige seiner Attribute festlegen:
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
Ein -Element in einem neuen Fenster absenden:
Spezifikationen
Specification |
---|
HTML # htmlformelement |