<form>: Das Formularelement

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.

Das <form> HTML-Element repräsentiert einen Dokumentabschnitt, der interaktive Steuerungen zum Übermitteln von Informationen enthält.

Probieren Sie es aus

Es ist möglich, die CSS- Pseudoklassen :valid und :invalid zu verwenden, um ein <form> Element basierend darauf, ob die elements innerhalb des Formulars gültig sind, zu stylen.

Attribute

Dieses Element enthält die globalen Attribute.

accept

Durch Kommas getrennte Inhaltstypen, die der Server akzeptiert.

Note: Dieses Attribut ist veraltet und sollte nicht verwendet werden. Stattdessen verwenden Sie das Attribut accept an <input type=file> Elementen.

accept-charset

Durch Leerzeichen getrennte Zeichenkodierungen, die der Server akzeptiert. Der Browser verwendet sie in der angegebenen Reihenfolge. Der Standardwert bedeutet die gleiche Kodierung wie die Seite. (In früheren Versionen von HTML konnten Zeichenkodierungen auch durch Kommas getrennt werden.)

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und, wenn ja, auf welche Weise. Weitere Informationen finden Sie auf der Seite zum globalen Attribut autocapitalize.

autocomplete

Gibt an, ob Eingabeelemente standardmäßig automatisch vom Browser ausgefüllt werden können. autocomplete-Attribute an Formularelementen überschreiben dies am <form>. Mögliche Werte:

name

Der Name des Formulars. Der Wert darf nicht die leere Zeichenfolge sein und muss innerhalb der Formularelemente-Sammlung, in der es sich befindet, eindeutig sein, falls vorhanden.

rel

Steuert die Anmerkungen und welche Arten von Links das Formular erstellt. Anmerkungen umfassen external, nofollow, opener, noopener, und noreferrer. Linktypen umfassen help, prev, next, search, und license. Der Wert von rel ist eine durch Leerzeichen getrennte Liste dieser aufgezählten Werte.

Attribute für die Formularübermittlung

Die folgenden Attribute steuern das Verhalten während der Formularübermittlung.

action

Die URL, die die Formularübermittlung verarbeitet. Dieser Wert kann durch ein formaction-Attribut an einem <button>, <input type="submit"> oder <input type="image"> Element überschrieben werden. Dieses Attribut wird ignoriert, wenn method="dialog" gesetzt ist.

enctype

Wenn der Wert des method-Attributs post ist, ist enctype der MIME-Typ der Formularübermittlung. Mögliche Werte:

  • application/x-www-form-urlencoded: Der Standardwert.
  • multipart/form-data: Verwenden Sie dies, wenn das Formular <input> Elemente mit type=file enthält.
  • text/plain: Nützlich zu Debugging-Zwecken.

Dieser Wert kann durch formenctype-Attribute an <button>, <input type="submit"> oder <input type="image"> Elementen überschrieben werden.

method

Die HTTP-Methode, mit der das Formular übermittelt wird. Die einzigen erlaubten Methoden/Werte sind (nicht case-sensitive):

  • post: Die POST-Methode; Formulardaten werden als Request-Body gesendet.
  • get (Standard): Die GET-Methode; Formulardaten werden an die action-URL mit einem ?-Trennzeichen angehängt. Verwenden Sie diese Methode, wenn das Formular keine Nebeneffekte hat.
  • dialog: Wenn das Formular in einem <dialog> enthalten ist, schließt es den Dialog und löst ein submit-Ereignis bei der Übermittlung aus, ohne Daten zu senden oder das Formular zu leeren.

Dieser Wert wird durch formmethod-Attribute an <button>, <input type="submit"> oder <input type="image"> Elementen überschrieben.

novalidate

Dieses boolesche Attribut zeigt an, dass das Formular bei der Übermittlung nicht validiert werden soll. Wenn dieses Attribut nicht gesetzt ist (und daher das Formular wird validiert), kann es durch ein formnovalidate-Attribut an einem <button>, <input type="submit"> oder <input type="image"> Element, das zum Formular gehört, überschrieben werden.

target

Gibt an, wo die Antwort nach Übermittlung des Formulars angezeigt werden soll. Es ist ein Name/Keyword für einen Browsing-Kontext (z. B. Tab, Fenster oder iframe). Die folgenden Keywords haben besondere Bedeutungen:

  • _self (Standard): Laden in denselben Browsing-Kontext wie der aktuelle.
  • _blank: Laden in einen neuen, unbenannten Browsing-Kontext. Dies bietet das gleiche Verhalten wie rel="noopener", das window.opener nicht setzt.
  • _parent: Laden in den übergeordneten Browsing-Kontext des aktuellen. Wenn kein übergeordneter Kontext vorhanden ist, verhält es sich wie _self.
  • _top: Laden in den obersten Browsing-Kontext (d. h. den Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen übergeordneten Kontext hat). Wenn kein übergeordneter Kontext vorhanden ist, verhält es sich wie _self.
  • _unfencedTop: Laden Sie die Antwort aus einem Formular innerhalb eines eingebetteten fenced frames in den obersten Rahmen (d. h. sie durchqueren über die Wurzel des fenced frames hinweg, anders als andere reservierte Ziele). Nur verfügbar innerhalb von fenced frames.

Dieser Wert kann durch ein formtarget-Attribut an einem <button>, <input type="submit"> oder <input type="image"> Element überschrieben werden.

Beispiele

html
<!-- Form which will send a GET request to the current URL -->
<form method="get">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label><input type="radio" name="radio" value="yes" /> Yes</label>
    <label><input type="radio" name="radio" value="no" /> No</label>
  </fieldset>
</form>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Fließender Inhalt, spürbarer Inhalt
Erlaubter Inhalt Fließender Inhalt, aber ohne <form>-Elemente
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Flussinhalt akzeptiert
Implizite ARIA-Rolle form
Erlaubte ARIA-Rollen search, none oder presentation
DOM-Schnittstelle [`HTMLFormElement`](/de/docs/Web/API/HTMLFormElement)

Spezifikationen

Specification
HTML Standard
# the-form-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch