DasHTMLFormElement Interface repräsentiert ein<form> Element im DOM. Es ermöglicht den Zugriff auf – und in einigen Fällen die Modifikation von – Aspekten des Formulars sowie den Zugang zu seinen Komponentenelementen.

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von seinem übergeordneten Element,HTMLElement.

HTMLFormElement.acceptCharset

Ein String, der den Wert des HTML-Attributsaccept-charset des Formulars widerspiegelt.

HTMLFormElement.action

Ein String, der den Wert des HTML-Attributsaction 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 HTML-Attributsautocomplete des Formulars widerspiegelt, welches angibt, ob die Steuerungen in diesem Formular automatisch vom Browser ausgefüllt werden können.

HTMLFormElement.encoding oderHTMLFormElement.enctype

Ein String, der den Wert des HTML-Attributsenctype des Formulars widerspiegelt, der den Typ des Inhalts angibt, der verwendet wird, um das Formular zum Server zu übertragen. Nur angegebene Werte können gesetzt werden. Die beiden Eigenschaften sind synonym.

HTMLFormElement.elementsSchreibgeschützt

EineHTMLFormControlsCollection, die alle Formularsteuerungen enthält, die zu diesem Formularelement gehören.

HTMLFormElement.lengthSchreibgeschützt

Einlong, der die Anzahl der Steuerungen im Formular widerspiegelt.

HTMLFormElement.name

Ein String, der den Wert des HTML-Attributsname des Formulars widerspiegelt und den Namen des Formulars enthält.

HTMLFormElement.noValidate

Ein boolescher Wert, der den Wert des HTML-Attributsnovalidate des Formulars widerspiegelt und angibt, ob das Formular nicht validiert werden soll.

HTMLFormElement.method

Ein String, der den Wert des HTML-Attributsmethod des Formulars widerspiegelt, der die HTTP-Methode angibt, die für das Einreichen des Formulars verwendet wird. Nur angegebene Werte können gesetzt werden.

HTMLFormElement.rel

Ein String, der den Wert des HTML-Attributsrel des Formulars widerspiegelt, welcher die Art der vom Formular erstellten Links als durch Leerzeichen getrennte Liste von aufgezählten Werten darstellt.

HTMLFormElement.relListSchreibgeschützt

EineDOMTokenList, die das HTML-Attributrel als Liste von Tokens widerspiegelt.

HTMLFormElement.target

Ein String, der den Wert des HTML-Attributstarget des Formulars widerspiegelt und angibt, wo die Ergebnisse der Formularübermittlung angezeigt werden sollen.

Benannte Eingaben werden ihrer Besitzerform als Eigenschaften hinzugefügt und können native Eigenschaften überschreiben, wenn sie denselben Namen teilen (z.B. ein Formular mit einer Eingabe namensaction wird seineaction Eigenschaft anstelle des HTML-Attributsaction des Formulars zurückgeben).

Instanz-Methoden

Dieses Interface erbt auch Methoden von seinem übergeordneten Element,HTMLElement.

checkValidity()

Gibttrue zurück, wenn die untergeordneten Steuerungen des Elements derConstraint-Validierung unterliegen und diese Einschränkungen erfüllen; gibtfalse zurück, wenn einige Steuerungen ihre Einschränkungen nicht erfüllen. Löst ein Ereignis namensinvalid bei jeder Steuerung aus, die ihre 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()

Gibttrue zurück, wenn die untergeordneten Steuerungen des Elements ihreValidierungseinschränkungen erfüllen. Wennfalse zurückgegeben wird, werden stornierbareinvalid Ereignisse für jedes ungültige Kind ausgelöst und Validierungsprobleme dem Benutzer gemeldet.

requestSubmit()

Fordert an, dass das Formular unter Verwendung des angegebenen Absende-Buttons und seiner entsprechenden Konfiguration gesendet wird.

reset()

Setzt das Formular in seinen Anfangszustand zurück.

submit()

Sendet das Formular zum Server.

Ereignisse

Sie können diese Ereignisse mitaddEventListener() überwachen oder einen Ereignis-Listener der Eigenschaftoneventname dieses Interfaces zuweisen.

formdata

Dasformdata Ereignis wird ausgelöst, nachdem die Eintragsliste, die die Formulardaten darstellt, erstellt wurde.

reset

Dasreset Ereignis wird ausgelöst, wenn ein Formular zurückgesetzt wird.

submit

Dassubmit Ereignis wird ausgelöst, wenn ein Formular gesendet wird.

Anwendungshinweise

Abrufen eines Formularelement-Objekts

Um einHTMLFormElement Objekt zu erhalten, können Sie einenCSS-Selektor mitquerySelector() verwenden, oder Sie können eine Liste aller Formulare im Dokument mit seinerforms Eigenschaft abrufen.

Document.forms gibt ein Array vonHTMLFormElement Objekten zurück, das jedes Formular auf der Seite auflistet. Sie können dann eine der folgenden Syntaxen verwenden, um ein einzelnes Formular zu erhalten:

document.forms[index]

Gibt das Formular am angegebenenindex im Array der Formulare zurück.

document.forms[id]

Gibt das Formular zurück, dessen ID dasid ist.

document.forms[name]

Gibt das Formular zurück, dessenname Attributswertname ist.

Zugriff auf die Elemente des Formulars

Sie können auf die Liste der datenhältigen Elemente des Formulars zugreifen, indem Sie die Eigenschaftelements des Formulars untersuchen. Dies gibt eineHTMLFormControlsCollection zurück, die alle Benutzerdateneingabeelemente des Formulars auflistet, sowohl die, die Nachkommen des<form> sind, als auch die, die Mitglieder des Formulars sind, indem sie ihreform Attribute verwenden.

Sie können auch das Element des Formulars mit seinemname Attribut als Schlüssel desform erhalten, aber die Verwendung vonelements ist ein besserer Ansatz – es enthältnur die Elemente des Formulars und kann nicht mit anderen Attributen desform gemischt werden.

Probleme mit der Benennung von Elementen

Einige Namen werden die JavaScript-Zugriffe auf die Eigenschaften und Elemente des Formulars beeinträchtigen.

Zum Beispiel:

• <input name="id"> wird gegenüber<form> Vorrang haben. Das bedeutet, dassform.id sich nicht auf die ID des Formulars bezieht, sondern auf das Element, dessen Name"id" ist. Dies wird bei allen anderen Formulareigenschaften der Fall sein, wie<input name="action"> oder<input name="post">.
• <input name="elements"> wird dieelements-Sammlung des Formulars unzugänglich machen. Der Verweisform.elements wird jetzt auf das individuelle Element verweisen.

Um solche Probleme mit Elementnamen zu vermeiden:

• Verwenden Sieimmer dieelements-Sammlung, um Mehrdeutigkeiten zwischen einem Elementnamen und einer Formulareigenschaft zu vermeiden.
• Verwenden Sieniemals"elements" als Elementnamen.

Wenn Sie kein JavaScript verwenden, wird dies kein Problem verursachen.

Elemente, die als Formularsteuerelemente gelten

Die vomHTMLFormElement.elements undHTMLFormElement.length eingeschlossenen Elemente sind die folgenden:

• <button>
• <fieldset>
• <input> (mit der Ausnahme, dass alle, derentype"image" ist, aus historischen Gründen weggelassen werden)
• <object>
• <output>
• <select>
• <textarea>

Keine anderen Elemente sind in der Liste enthalten, die vonelements zurückgegeben wird, was es zu einer ausgezeichneten Möglichkeit macht, die wichtigsten Elemente beim Verarbeiten von Formularen zu erfassen.

Beispiele

Erstellung eines neuen Formularelements, Änderung seiner Attribute und anschließendem Absenden:

const f = document.createElement("form"); // Create a formdocument.body.appendChild(f); // Add it to the document bodyf.action = "/cgi-bin/some.cgi"; // Add action and method attributesf.method = "POST";f.submit(); // Call the form's submit() method

Extraktion von Informationen aus einem<form>-Element und Festlegung einiger seiner Attribute:

<form name="formA" action="/cgi-bin/test" method="post">  <p>Press "Info" for form details, or "Set" to change those details.</p>  <p>    <button type="button">Info</button>    <button type="button">Set</button>    <button type="reset">Reset</button>  </p>  <textarea rows="15" cols="20"></textarea></form>

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 <textarea> to display the form's properties  document.forms["formA"].elements["form-info"].value = info; // document.forms["formA"]['form-info'].value would also work});document.getElementById("set-info").addEventListener("click", (e) => {  // Get a reference to the form via the event target  // e.target is the button, and .form is the form it belongs to  const f = e.target.form;  // Argument should be a form element reference.  f.action = "a-different-url.cgi";  f.name = "a-different-name";});

Einreichen eines<form> in einem neuen Fenster:

<form action="test.php">  <p>    <label>First name: <input type="text" name="first-name" /></label>  </p>  <p>    <label>Last name: <input type="text" name="last-name" /></label>  </p>  <p>    <label><input type="password" name="pwd" /></label>  </p>  <fieldset>    <legend>Pet preference</legend>    <p>      <label><input type="radio" name="pet" value="cat" /> Cat</label>    </p>    <p>      <label><input type="radio" name="pet" value="dog" /> Dog</label>    </p>  </fieldset>  <fieldset>    <legend>Owned vehicles</legend>    <p>      <label        ><input type="checkbox" name="vehicle" value="Bike" />I have a        bike</label      >    </p>    <p>      <label        ><input type="checkbox" name="vehicle" value="Car" />I have a car</label      >    </p>  </fieldset>  <p><button>Submit</button></p></form>

Spezifikationen

Browser-Kompatibilität

Weitere Informationen

• Das HTML-Element, das dieses Interface implementiert:<form>.