<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 Dokumentenabschnitt, der interaktive Steuerelemente zum Übermitteln von Informationen enthält.

Probieren Sie es aus

Es ist möglich, die :valid und :invalid CSS-Pseudoklassen zu verwenden, um ein <form>-Element zu gestalten, 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.

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

accept-charset

Die vom Server akzeptierte Zeichenkodierung. Die Spezifikation erlaubt einen einzelnen wertunabhängigen Wert von "UTF-8", was die Allgegenwärtigkeit dieser Kodierung widerspiegelt (historisch konnten mehrere Zeichenkodierungen als durch Kommas oder Leerzeichen getrennte Liste angegeben werden).

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und, falls ja, in welcher Weise. Weitere Informationen finden Sie auf der Seite des globalen Attributs autocapitalize.

autocomplete

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

  • off: Der Browser darf Einträge nicht automatisch ausfüllen. (Browser neigen dazu, dies bei verdächtigen Anmeldeformularen zu ignorieren; siehe Verwaltung von Autofill für Anmeldefelder.)
  • on: Der Browser darf Einträge automatisch ausfüllen.
name

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

rel

Steuert die Annotationen und welche Arten von Links das Formular erstellt. Zu den Annotationen gehören external, nofollow, opener, noopener und noreferrer. Linktypen beinhalten help, prev, next, search und license. Der rel Wert ist eine durch Leerzeichen getrennte Liste dieser enumerierten Werte.

Attribute zur Formularübermittlung

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

action

Die URL, die die Formularübermittlung verarbeitet. Dieser Wert kann von einem formaction Attribut auf 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 auf <button>, <input type="submit"> oder <input type="image"> Elementen überschrieben werden.

method

Die HTTP Methode zur Übermittlung des Formulars. Die einzigen erlaubten Methoden/Werte sind (unabhängig von Groß-/Kleinschreibung):

  • post: Die POST Methode; Formulardaten werden als Request-Body gesendet.
  • get (Standard): Die GET; Formulardaten werden mit einem ?-Separator an die action-URL 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 verursacht ein submit Event bei der Übermittlung, ohne Daten zu übermitteln oder das Formular zu leeren.

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

novalidate

Dieses boolesche Attribut gibt an, dass das Formular bei der Übermittlung nicht validiert werden soll. Wenn dieses Attribut nicht gesetzt ist (und das Formular daher wird validiert), kann es durch ein formnovalidate Attribut auf 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/Schlüsselwort für einen Browsing-Kontext (zum Beispiel Tab, Fenster oder iframe). Die folgenden Schlüsselwörter haben besondere Bedeutungen:

  • _self (Standard): In den gleichen Browsing-Kontext wie den aktuellen laden.
  • _blank: In einen neuen, unbenannten Browsing-Kontext laden. Dies bietet dasselbe Verhalten wie das Setzen von rel="noopener", das nicht window.opener setzt.
  • _parent: In den übergeordneten Browsing-Kontext des aktuellen laden. Wenn kein übergeordneter vorhanden ist, verhält sich wie _self.
  • _top: In den obersten Browsing-Kontext laden (d. h. den Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen übergeordneten hat). Wenn kein übergeordneter vorhanden ist, verhält sich wie _self.
  • _unfencedTop: Läd die Antwort eines Formulars innerhalb eines eingebetteten fenced frame in das oberste Frame (d. h. über das Root des fenced frame hinausgehend, im Gegensatz zu anderen reservierten Zielen). Nur innerhalb von fenced frames verfügbar.

Dieser Wert kann durch ein formtarget Attribut auf 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, greifbarer Inhalt
Erlaubter Inhalt Flussinhalt, darf jedoch keine <form> Elemente enthalten
Tag-Auslassung Keine, sowohl das startende als auch das endende 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