<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
Veraltet-
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
undnoreferrer
. Linktypen umfassenhelp
,prev
,next
,search
undlicense
. Derrel
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, wennmethod="dialog"
gesetzt ist. enctype
-
Wenn der Wert des
method
Attributspost
ist, istenctype
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 mittype=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
: DiePOST
Methode; Formulardaten werden als Anfrageinhalt gesendet.get
(Standard): DieGET
Methode; Formulardaten werden an dieaction
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 einsubmit
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 vonrel="noopener"
, daswindow.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
<!-- 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
- HTML-Formulare Leitfaden
- Andere Elemente, die beim Erstellen von Formularen verwendet werden:
<button>
,<datalist>
,<fieldset>
,<input>
,<label>
,<legend>
,<meter>
,<optgroup>
,<option>
,<output>
,<progress>
,<select>
,<textarea>
. - Abrufen einer Liste von Elementen im Formular:
HTMLFormElement.elements
- ARIA: Form-Rolle
- ARIA: Suchrolle