HTMLFormElement

Dieses Interface erbt auch Eigenschaften von seinem Elternteil, HTMLElement.

HTMLFormElement.elements Schreibgeschützt

Eine HTMLFormControlsCollection, die alle Formularsteuerelemente enthält, die zu diesem Formularelement gehören.

HTMLFormElement.length Schreibgeschützt

Ein long, das die Anzahl der Steuerelemente im Formular widerspiegelt.

HTMLFormElement.name

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

HTMLFormElement.method

Ein String, der den Wert des method-HTML-Attributes des Formulars widerspiegelt, und die HTTP-Methode angibt, die zum Absenden des Formulars verwendet wird. Es können nur spezifizierte Werte gesetzt werden.

HTMLFormElement.target

Ein String, der den Wert des target-HTML-Attributes des Formulars widerspiegelt, und angibt, wo die Ergebnisse der Formulareinsendung angezeigt werden sollen.

HTMLFormElement.action

Ein String, der den Wert des action-HTML-Attributes des Formulars widerspiegelt, und die URI eines Programms enthält, das die vom Formular übermittelten Informationen verarbeitet.

HTMLFormElement.encoding oder HTMLFormElement.enctype

Ein String, der den Wert des enctype-HTML-Attributes des Formulars widerspiegelt, und den Inhaltstyp angibt, der verwendet wird, um das Formular an den Server zu übermitteln. Es können nur spezifizierte Werte gesetzt werden. Die beiden Eigenschaften sind Synonyme.

HTMLFormElement.acceptCharset

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

HTMLFormElement.autocomplete

Ein String, der den Wert des autocomplete-HTML-Attributes des Formulars widerspiegelt, und angibt, ob die Steuerelemente dieses Formulars ihre Werte automatisch von dem Browser ausgefüllt bekommen können.

HTMLFormElement.noValidate

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

Benannte Eingaben werden ihren Eigentümer-Formularinstanzen als Eigenschaften hinzugefügt und können native Eigenschaften überschreiben, wenn sie denselben Namen haben (z. B. wird ein Formular mit einer Eingabe namens action seine action-Eigenschaft so zurückgeben, dass diese Eingabe anstelle des action-HTML-Attributes des Formulars zurückgegeben wird).

Dieses Interface erbt auch Methoden von seinem Elternteil, HTMLElement.

checkValidity()

Gibt true zurück, wenn die Kind-Steuerelemente des Elements einer Einschränkungsvalidierung unterliegen und diese Einschränkungen erfüllen; gibt false zurück, wenn einige Steuerelemente ihre Einschränkungen nicht erfüllen. Löst ein Ereignis namens invalid bei jedem Steuerelement aus, das seine Einschränkungen nicht erfüllt; solche Steuerelemente gelten als ungültig, wenn das Ereignis nicht abgebrochen wird. Es liegt am Programmierer zu entscheiden, wie auf false reagiert wird.

reportValidity()

Gibt true zurück, wenn die Kind-Steuerelemente des Elements ihre Validierungseinschränkungen erfüllen. Wenn false zurückgegeben wird, werden abbrechbare invalid-Ereignisse für jedes ungültige Kind ausgelöst und Validierungsprobleme dem Benutzer gemeldet.

requestSubmit()

Fordert an, dass das Formular mit dem angegebenen Submit-Button und dessen entsprechender Konfiguration gesendet wird.

reset()

Setzt das Formular in seinen Anfangszustand zurück.

submit()

Sendet das Formular an den Server.

Hören Sie auf diese Ereignisse, indem Sie addEventListener() verwenden oder einen Ereignis-Listener der oneventname-Eigenschaft dieses Interfaces zuweisen.

formdata

Das formdata-Ereignis wird ausgelöst, nachdem die Eintragsliste, die die Formulardaten darstellt, erstellt wurde.

reset

Das reset-Ereignis wird ausgelöst, wenn ein Formular zurückgesetzt wird.

submit

Das submit-Ereignis wird ausgelöst, wenn ein Formular gesendet wird.

Um ein HTMLFormElement-Objekt zu erhalten, können Sie einen CSS-Selektor mit querySelector() verwenden oder eine Liste aller Formulare im Dokument über seine forms-Eigenschaft abrufen.

Document.forms gibt ein Array von HTMLFormElement-Objekten zurück, die jedes der Formulare auf der Seite auflisten. Sie können dann eine der folgenden Syntaxen verwenden, um ein einzelnes 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 Wert name hat.

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 Benutzerdateneintragselemente des Formulars auflistet, sowohl diejenigen, die Nachkommen des <form> sind, als auch solche, die über ihre form-Attribute Mitglieder des Formulars wurden.

Sie können auch auf das Element des Formulars zugreifen, indem Sie sein 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.

Einige Namen stehen dem JavaScript-Zugriff auf die Eigenschaften und Elemente des Formulars im Weg.

Zum Beispiel:

• <input name="id"> wird Vorrang vor <form id="…"> haben. Das bedeutet, dass form.id sich nicht mehr auf die ID des Formulars bezieht, sondern auf das Element, dessen Name "id" ist. Dies wird bei allen anderen Formulareigenschaften der Fall sein, wie bei <input name="action"> oder <input name="post">.
• <input name="elements"> macht die elements-Sammlung des Formulars unzugänglich. Die Referenz form.elements wird nun auf das einzelne Element verweisen.

Um solche Probleme mit Elementnamen zu vermeiden:

• Verwenden Sie immer die elements-Sammlung, um Mehrdeutigkeiten zwischen einem Elementnamen und einer Formulareigenschaft zu vermeiden.
• Verwenden Sie niemals "elements" als Elementnamen.

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

Die von HTMLFormElement.elements und HTMLFormElement.length eingeschlossenen Elemente sind die folgenden:

• <button>
• <fieldset>
• <input> (mit der Ausnahme, dass alle, deren type "image" ist, aus historischen Gründen ausgeschlossen sind)
• <object>
• <output>
• <select>
• <textarea>

Keine anderen Elemente sind in der von elements zurückgegebenen Liste enthalten, was es zu einem hervorragenden Weg macht, um die wichtigsten Elemente beim Verarbeiten von Formularen zu erreichen.

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 <form>-Element extrahieren und einige seiner Attribute setzen:

<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" onclick="getFormInfo();">Info</button>
    <button type="button" onclick="setFormInfo(this.form);">Set</button>
    <button type="reset">Reset</button>
  </p>

  <textarea id="form-info" rows="15" cols="20"></textarea>
</form>

<script>
  function getFormInfo() {
    // 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
  }

  function setFormInfo(f) {
    // Argument should be a form element reference.
    f.action = "a-different-url.cgi";
    f.name = "a-different-name";
  }
</script>

Ein <form> in ein neues Fenster übermitteln:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Example new-window form submission</title>
  </head>
  <body>
    <form action="test.php" target="_blank">
      <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>
  </body>
</html>

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