<form>: Das Form-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.

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

Das <form> HTML-Element repräsentiert einen Dokumentabschnitt, 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 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 enthält die globalen Attribute.

accept

Kommagetrennte Inhaltstypen, die der Server akzeptiert.

Hinweis:>Dieses Attribut ist veraltet und sollte nicht mehr 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 einzigen, nicht case-sensitiven Wert von "UTF-8", was die Allgegenwärtigkeit dieser Kodierung widerspiegelt (historisch konnten mehrere Zeichenkodierungen als kommagetrennte oder leerzeichengetrennte Liste angegeben werden).

autocapitalize

Bestimmt, ob eingegebener Text automatisch großgeschrieben wird und, falls ja, auf welche Weise. Siehe die autocapitalize globale Attributseite für weitere Informationen.

autocomplete

Gibt an, ob Eingabeelemente standardmäßig ihre Werte automatisch vom Browser vervollständigen lassen können. autocomplete-Attribute in Formularelementen überschreiben es auf <form>. Mögliche Werte:

  • off: Der Browser darf Einträge nicht automatisch vervollständigen (Browser neigen dazu, dies für vermutete Login-Formulare zu ignorieren; siehe Verwalten des Autofills für Login-Felder).
  • on: Der Browser darf Einträge automatisch vervollständigen.
name

Der Name des Formulars. Der Wert darf nicht die leere Zeichenkette sein und muss eindeutig unter den form-Elementen in der Formularsammlung sein, in der es sich befindet, falls vorhanden.

rel

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

Attribute für das Absenden von Formularen

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 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 für Debugging-Zwecke.

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

method

Die HTTP-Methode zum Absenden des Formulars. Die einzigen zulässigen Methoden/Werte sind (Groß-/Kleinschreibung wird nicht berücksichtigt):

  • post: Die POST-Methode; Formulardaten werden als Anfragekörper 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 Seiteneffekte hat.
  • dialog: Wenn das Formular innerhalb eines <dialog> ist, schließt es den Dialog und löst ein submit-Ereignis bei der Übermittlung aus, 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 zeigt an, dass das Formular beim Absenden nicht validiert werden soll. Wenn dieses Attribut nicht gesetzt ist (und das Formular daher validiert wird), 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 dem Absenden des Formulars angezeigt werden soll. Es ist ein Name/Keyword für einen Browsing-Kontext (z.B. Tab, Fenster oder iframe). Die folgenden Schlüsselwörter haben spezielle Bedeutungen:

  • _self (Standard): Wird in denselben Browsing-Kontext wie der aktuelle geladen.
  • _blank: Wird in einem neuen nicht benannten Browsing-Kontext geladen. Dies bietet dasselbe Verhalten wie das Setzen von rel="noopener", welches window.opener nicht setzt.
  • _parent: Wird in den übergeordneten Browsing-Kontext des aktuellen geladen. Wenn kein Eltern vorhanden ist, verhält es sich wie _self.
  • _top: Wird in den obersten Browsing-Kontext geladen (d.h. der Browsing-Kontext, der ein Vorfahr des aktuellen ist und keinen Eltern hat). Wenn kein Eltern vorhanden ist, verhält es sich wie _self.
  • _unfencedTop: Lädt die Antwort eines Formulars innerhalb eines eingebetteten fenced frames in das oberste Frame (d.h. über die Wurzel des fenced frames hinweg, 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 Übersicht

Inhaltskategorien Fließinhalte, fühlbare Inhalte
Erlaubte Inhalte Fließinhalte, aber keine <form>-Elemente enthalten
Tag-Weglassung Keine, sowohl das öffnende als auch das schließende Tag sind zwingend.
Erlaubte Eltern Jedes Element, das Fließinhalte 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