<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 Steuerelemente 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- Pseudoklassen :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

Durch Kommas getrennte Inhaltstypen, die der Server akzeptiert.

Hinweis: Dieses Attribut wurde 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 einzigen, unempfindlichen Wert von "UTF-8", der die Allgegenwärtigkeit dieser Kodierung widerspiegelt (historisch konnten mehrere Zeichenkodierungen als durch Kommas oder Leerzeichen getrennte Liste angegeben werden).

autocapitalize

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

autocomplete

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

name

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

rel

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

Attribute zur Formularübermittlung

Die folgenden Attribute kontrollieren das Verhalten während 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 zum Übermitteln des Formulars. Die einzigen erlaubten Methoden/Werte sind (ohne Berücksichtigung der Groß-/Kleinschreibung):

  • post: Die POST Methode; Formulardaten werden als request body 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 Nebeneffekte hat.
  • dialog: Wenn das Formular innerhalb eines <dialog> ist, schließt das Dialogfeld und verursacht ein submit Ereignis bei der Übermittlung, ohne Daten zu senden 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 bei der Übermittlung nicht validiert werden soll. Wenn dieses Attribut nicht gesetzt ist (und daher das Formular ist 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 der Übermittlung des Formulars angezeigt werden soll. Es ist ein Name/Stichwort für einen Browsing-Kontext (zum Beispiel Tab, Fenster oder iframe). Die folgenden Stichwörter haben spezielle Bedeutungen:

  • _self (Standard): Laden in den gleichen Browsing-Kontext wie den aktuellen.
  • _blank: Laden in einen neuen, unbenannten Browsing-Kontext. Dies bietet das gleiche Verhalten wie das Setzen von rel="noopener", das window.opener nicht setzt.
  • _parent: Laden in den übergeordneten Browsing-Kontext des aktuellen. Wenn kein übergeordneter Kontext vorhanden ist, verhält es sich wie _self.
  • _top: Laden in den obersten Browsing-Kontext (d. h. der Browsing-Kontext, der ein Vorfahr des aktuellen ist und keinen übergeordneten Kontext hat). Wenn kein übergeordneter Kontext vorhanden ist, verhält es sich wie _self.
  • _unfencedTop: Laden der Antwort aus einem Formular innerhalb eines eingebetteten fenced frame in den obersten Frame (d. h. das Überschreiten der Wurzel des fenced frame, 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 Flow-Inhalt, wahrnehmbarer Inhalt
Zulässiger Inhalt Flow-Inhalt, jedoch ohne <form>-Elemente
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Flow-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