HTMLFormElement

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, HTMLElement.

HTMLFormElement.elements Nur lesbar

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

HTMLFormElement.length Nur lesbar

Ein long, das die Anzahl der Steuerelemente 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.method

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

HTMLFormElement.target

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

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.encoding oder HTMLFormElement.enctype

Ein String, der den Wert des enctype-HTML-Attributs des Formulars widerspiegelt und den Typ des Inhalts angibt, der zum Übermitteln des Formulars zum Server verwendet wird. Es können nur festgelegte Werte gesetzt werden. Die beiden Eigenschaften sind Synonyme.

HTMLFormElement.acceptCharset

Ein String, der den Wert des accept-charset-HTML-Attributs des Formulars widerspiegelt und die Zeichenkodierung repräsentiert, die der Server akzeptiert.

HTMLFormElement.autocomplete

Ein String, der den Wert des autocomplete-HTML-Attributs des Formulars widerspiegelt und angibt, ob die Steuerungen in diesem Formular automatisch vom Browser ausgefüllt werden können.

HTMLFormElement.noValidate

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

Benannte Eingaben werden ihrer Besitzerformularinstanz 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 zurückgeben, anstatt des action-HTML-Attributs des Formulars).

Diese Schnittstelle erbt auch Methoden von ihrem Elternteil, HTMLElement.

checkValidity()

Gibt true zurück, wenn die Kindsteuerungen des Elements einer Einschränkungsvalidierung unterliegen und diese Einschränkungen erfüllen; gibt false zurück, wenn einige Steuerungen ihre Einschränkungen nicht erfüllen. Löst ein Ereignis namens invalid an jeder Steuerung aus, welche die Einschränkungen nicht erfüllt; solche Steuerungen gelten als ungültig, wenn das Ereignis nicht abgebrochen wird. Es liegt im Ermessen des Programmierers, wie auf false reagiert wird.

reportValidity()

Gibt true zurück, wenn die Kindsteuerungen 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 Absenden-Button und der entsprechenden Konfiguration eingereicht wird.

reset()

Setzt das Formular auf seinen ursprünglichen Zustand zurück.

submit()

Sendet das Formular an den Server.

Fügen Sie diese Ereignisse mit addEventListener() hinzu, oder weisen Sie einen Ereignis-Listener der oneventname-Eigenschaft dieser Schnittstelle zu.

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 Sie können eine Liste aller Formulare im Dokument mit der forms-Eigenschaft erhalten.

Document.forms gibt ein Array von HTMLFormElement-Objekten zurück, das jedes der Formulare auf der Seite auflistet. Sie können dann jede 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-Attributwert name ist.

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 Daten-Nutzereingabeelemente des Formulars auflistet, sowohl diejenigen, die Nachkommen des <form> sind, als auch diejenigen, die durch ihre form-Attribute zu Mitgliedern des Formulars gemacht werden.

Sie können auch auf das Element des Formulars zugreifen, indem Sie das name-Attribut als Schlüssel des form verwenden, aber die Verwendung von elements ist der bessere Ansatz – es enthält nur die Elemente des Formulars und kann nicht mit anderen Attributen des form vermischt werden.

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

Zum Beispiel:

• <input name="id"> hat Vorrang vor <form id="…">. Das bedeutet, dass form.id sich nicht auf die ID des Formulars beziehen wird, sondern auf das Element, dessen Name "id" ist. Dies wird für jede andere Formulaireigenschaft der Fall sein, wie <input name="action"> oder <input name="post">.
• <input name="elements"> wird die elements-Sammlung des Formulars unzugänglich machen. Die Referenz form.elements wird nun auf das individuelle 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 einbezogenen Elemente sind die folgenden:

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

Keine anderen Elemente sind in der von elements zurückgegebenen Liste enthalten, was sie zu einer hervorragenden Möglichkeit macht, die wichtigsten Elemente bei der Verarbeitung von Formularen zu erhalten.

Erstellen eines neuen Formularelements, Ändern seiner Attribute und anschließendes Senden:

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 einem neuen Fenster einreichen:

<!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 diese Schnittstelle implementiert: <form>.