<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 Dokumentabschnitt, der interaktive Steuerungen zur Übermittlung 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 CSS Pseudo-Klassen :valid und :invalid 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-getrennte Inhaltstypen, die der Server akzeptiert.

Hinweis: Dieses Attribut wurde als veraltet erklärt und sollte nicht verwendet werden. Stattdessen verwenden Sie das accept Attribut in <input type=file> Elementen.

accept-charset

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

autocapitalize

Bestimmt, ob eingegebener Text automatisch großgeschrieben wird und in welcher Weise. Weitere Informationen finden Sie auf der Seite zum globalen Attribut autocapitalize.

autocomplete

Gibt an, ob Eingabeelemente standardmäßig automatisch durch den Browser vervollständigt werden können. autocomplete Attribute in Formularelementen überschreiben das im <form>. Mögliche Werte:

  • off: Der Browser darf Einträge nicht automatisch vervollständigen. (Browser neigen dazu, dies bei vermuteten Login-Formularen zu ignorieren; siehe Verwalten von Autofill für Login-Felder.)
  • on: Der Browser darf Einträge automatisch vervollständigen.
name

Der Name des Formulars. Der Wert darf nicht der leere String sein und muss eindeutig innerhalb der form Elemente in der Formulareingebung sein, falls vorhanden.

rel

Bestimmt die Annotationen und welche Arten von Links das Formular erstellt. Annotationen umfassen external, nofollow, opener, noopener und noreferrer. Linktypen umfassen help, prev, next, search und license. Der rel Wert ist eine durch Leerzeichen getrennte Liste dieser enumerierten 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 von einem formaction Attribut in 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 für Debug-Zwecke.

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

method

Die HTTP Methode, mit der das Formular übermittelt wird. Die einzig erlaubten Methoden/Werte sind (nicht groß- und kleinschreibungsempfindlich):

  • post: Die POST Methode; Formulardaten werden als Anfrageinhalt gesendet.
  • get (Standard): Die GET Methode; Formulardaten werden an die action URL mit einem ? Separator angehängt. Verwenden Sie diese Methode, wenn das Formular keine Nebenwirkungen hat.
  • dialog: Wenn sich das Formular in einem <dialog> befindet, schließt das 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 in <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 ist daher validiert), kann es durch ein formnovalidate Attribut in 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 (z.B. Tab, Fenster, oder iframe). Die folgenden Schlüsselwörter haben spezielle Bedeutungen:

  • _self (Standard): Lädt in denselben Browsing-Kontext wie der aktuelle.
  • _blank: Lädt in einen neuen, unbenannten Browsing-Kontext. Dies bietet das gleiche Verhalten wie das Setzen von rel="noopener", das window.opener nicht setzt.
  • _parent: Lädt in den übergeordneten Browsing-Kontext des aktuellen. Wenn kein übergeordneter Kontext vorhanden ist, verhält es sich wie _self.
  • _top: Lädt 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: Lädt die Antwort eines Formulars innerhalb eines eingebetteten Eingezäunten Rahmens in den obersten Rahmen (d.h. über das Ende des eingegrenzten Rahmens hinaus, anders als bei anderen reservierten Zielen). Nur innerhalb von eingegrenzten Rahmen verfügbar.

Dieser Wert kann durch ein formtarget Attribut in 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, fühlbarer Inhalt
Erlaubter Inhalt Fließender Inhalt, jedoch ohne <form> Elemente
Tag-Auslassung Keine, sowohl Start- als auch End-Tag sind erforderlich.
Erlaubte Eltern Jedes Element, das fließenden Inhalt 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