`<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.

* Some parts of this feature may have varying levels of support.

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

Probieren Sie es aus

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required />
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!" />
  </div>
</form>

form.form-example {
  display: table;
}

div.form-example {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin-bottom: 10px;
}

label {
  padding-right: 10px;
}

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

Attribute

Dieses Element umfasst die globalen Attribute.

accept

Komma-separierte Inhaltstypen, die der Server akzeptiert.

Hinweis: Dieses Attribut ist veraltet und sollte nicht mehr verwendet werden. Stattdessen verwenden Sie das accept-Attribut auf <input type=file>-Elementen.

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 komma- oder leerzeichengetrennte Liste angegeben werden).

autocapitalize

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

autocomplete

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

name

Der Name des Formulars. Der Wert darf nicht die leere Zeichenfolge sein und muss innerhalb der form-Elemente der Formularsammlung eindeutig sein, in der es sich befindet, falls vorhanden. Der Name wird zu einer Eigenschaft der Window-, Document- und document.forms-Objekte, die eine Referenz auf das Formularelement enthält.

rel

Kontrolliert die Annotationen und welche Arten von Links das Formular erstellt. Annotationen umfassen external, nofollow, opener, noopener und noreferrer. Link-Typen umfassen help, prev, next, search und license. Der rel-Wert ist eine leerzeichengetrennte Liste dieser enumerierten Werte.

Attribute für die Formularübermittlung

Die folgenden Attribute steuern das Verhalten bei der Formularübermittlung.

action

Die URL, die die Formularübermittlung verarbeitet. Dieser Wert kann durch ein 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 der Großschreibung):

  • post: Die POST-Methode; Formulardaten werden als Anforderungskörper gesendet.
  • get (Standard): Die GET-Methode; Formulardaten werden an die action-URL mit einem ?-Separator angehängt. Diese Methode sollte verwendet werden, wenn das Formular keine Nebeneffekte hat.
  • dialog: Wenn das Formular in einem <dialog> ist, schließt es den Dialog und verursacht, dass ein submit-Ereignis bei der Übermittlung ausgelöst wird, ohne Daten zu übermitteln oder das Formular zu löschen.

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 nicht validiert werden soll, wenn es übermittelt wird. Wenn dieses Attribut nicht gesetzt ist (und das Formular daher validiert wird), kann dies 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 der Ü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 laden wie den aktuellen.
  • _blank: In einen neuen unbenannten Browsing-Kontext laden. Dies erzeugt dasselbe Verhalten wie das Setzen von rel="noopener", das window.opener nicht festlegt.
  • _parent: In den übergeordneten Browsing-Kontext des aktuellen laden. Wenn kein Elternteil vorhanden ist, verhält sich wie _self.
  • _top: In den obersten Browsing-Kontext laden (d.h. der Browsing-Kontext, der ein Vorfahren des aktuellen ist und keinen Elternteil hat). Wenn kein Elternteil vorhanden ist, verhält sich wie _self.
  • _unfencedTop: Lädt die Antwort von einem Formular in einem eingebetteten fenced frame in den obersten Rahmen (d.h. über die Wurzel des fenced frame hinaus, anders als andere reservierte Ziele). 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, jedoch keine <form>-Elemente enthaltend
Tag-Auslassung Keine, sowohl der startende als auch der endende 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
# the-form-element

Browser-Kompatibilität

Siehe auch