<form>: Das Formulard-Element

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 zu stylen, basierend darauf, ob die elements innerhalb des Formulars gültig sind.

Attribute

Dieses Element enthält die globalen Attribute.

accept

Durch Kommas getrennte Inhaltstypen, die der Server akzeptiert.

Hinweis: Dieses Attribut ist veraltet und sollte nicht verwendet werden. Verwenden Sie stattdessen das accept-Attribut bei <input type=file>-Elementen.

accept-charset

Die vom Server akzeptierte Zeichenkodierung. Die Spezifikation erlaubt einen einzelnen nicht groß-/kleinschreibungssensitiven Wert von "UTF-8", was die Allgegenwärtigkeit dieser Kodierung widerspiegelt (historisch konnten mehrere Zeichenkodierungen als kommagetrennte oder leerzeichengetrennte Liste angegeben werden).

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird, und wenn ja, in welcher Weise. Siehe die autocapitalize globale Attributseite für weitere Informationen.

autocomplete

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

name

Der Name des Formulars. Der Wert darf nicht der leere String sein und muss in der Formelsammlung, in der es sich befindet, eindeutig unter den form-Elementen sein, wenn vorhanden.

rel

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

Attribute für das Absenden des Formulars

Die folgenden Attribute steuern das Verhalten beim Absenden des Formulars.

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 bei <button>, <input type="submit"> oder <input type="image">-Elementen überschrieben werden.

method

Die HTTP-Methode, mit der das Formular gesendet werden soll. Die einzigen erlaubten Methoden/Werte sind (groß-/kleinschreibungssensitiv):

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

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

novalidate

Dieses boolesche Attribut gibt an, dass das Formular beim Absenden nicht validiert werden soll. Wenn dieses Attribut nicht gesetzt ist (und das Formular daher nicht validiert wird), 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 dem Absenden des Formulars angezeigt werden soll. Es ist ein Name/Schlüsselwort für einen Browsing-Kontext (zum Beispiel Tab, Fenster oder iframe). Die folgenden Schlüsselwörter haben besondere Bedeutungen:

  • _self (Standard): Im gleichen Browsing-Kontext wie der aktuelle laden.
  • _blank: In einem neuen unbenannten Browsing-Kontext laden. Dies bietet das gleiche Verhalten wie das Setzen von rel="noopener", das window.opener nicht setzt.
  • _parent: Im übergeordneten Browsing-Kontext des aktuellen laden. Wenn kein Elternteil vorhanden ist, verhält es sich wie _self.
  • _top: Im übergeordneten Browsing-Kontext laden (d.h., dem Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen Elternteil hat). Wenn kein Elternteil vorhanden ist, verhält es sich wie _self.
  • _unfencedTop: Die Antwort von einem Formular innerhalb eines eingebetteten umzäunten Frames in den obersten Frame laden (d.h., über die Wurzel des umzäunten Frames hinausgehen, anders als andere reservierte Ziele). Nur innerhalb umzäunter Frames verfügbar.

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 Flussinhalt, fühlbarer Inhalt
Erlaubter Inhalt Flussinhalt, aber keine <form>-Elemente enthalten
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Flussinhalt akzeptiert
Implizierte 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