<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>
-Element HTML repräsentiert einen Abschnitt eines Dokuments, 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 :valid
und :invalid
CSS-Pseudoklassen zu verwenden, um ein <form>
-Element basierend auf der Gültigkeit der elements
innerhalb des Formulars zu gestalten.
Attribute
Dieses Element umfasst die globalen Attribute.
accept
Veraltet-
Durch Kommatas getrennte Inhaltstypen, die der Server akzeptiert.
Note: Dieses Attribut ist veraltet und sollte nicht verwendet werden. Verwenden Sie stattdessen das
accept
-Attribut bei<input type=file>
-Elementen. accept-charset
-
Die vom Server akzeptierte Zeichenkodierung. Die Spezifikation erlaubt einen einzigen ge- und kleinschreibungsunabhängigen Wert von
"UTF-8"
, was die Allgegenwart dieser Kodierung widerspiegelt (historisch konnten mehrere Zeichenkodierungen als komma- oder leerzeichengetrennte Liste angegeben werden). autocapitalize
-
Steuert, ob eingegebener Text automatisch großgeschrieben wird und, wenn ja, auf welche Weise. Weitere Informationen finden Sie auf der Seite zum
autocapitalize
-Globalattribut. autocomplete
-
Gibt an, ob Eingabeelemente standardmäßig automatisch vom Browser ihre Werte vervollständigen können.
autocomplete
-Attribute bei Formularelementen überschreiben dies bei<form>
. Mögliche Werte:off
: Der Browser darf Einträge nicht automatisch vervollständigen. (Browser neigen dazu, dies bei vermuteten Anmeldeformularen zu ignorieren; siehe Verwaltung der automatischen Vervollständigung für Anmeldefelder.)on
: Der Browser darf Einträge automatisch vervollständigen.
name
-
Der Name des Formulars. Der Wert darf nicht die leere Zeichenfolge sein und muss einzigartig unter den
form
-Elementen in der Formularkollektion sein, in der es sich befindet, falls vorhanden. rel
-
Regelt die Anmerkungen und welche Arten von Links das Formular erstellt. Anmerkungen umfassen
external
,nofollow
,opener
,noopener
undnoreferrer
. Linktypen umfassenhelp
,prev
,next
,search
undlicense
. Derrel
-Wert ist eine durch Leerzeichen getrennte Liste dieser aufgezählten Werte.
Attribute für Formularübermittlung
Die folgenden Attribute steuern das Verhalten während der Formularübermittlung.
action
-
Die URL, die die Formularübermittlung verarbeitet. Dieser Wert kann durch ein
formaction
-Attribut bei 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 Debugging-Zwecke.
Dieser Wert kann durch
formenctype
-Attribute bei<button>
,<input type="submit">
, oder<input type="image">
-Elementen überschrieben werden. method
-
Die HTTP-Methode, mit der das Formular übermittelt wird. Die einzigen erlaubten Methoden/Werte sind (unabhängig von Groß- und Kleinschreibung):
post
: DiePOST
-Methode; Formulardaten werden als Anfrageinhalt gesendet.get
(standardmäßig): DieGET
-Methode; Formulardaten werden an dieaction
-URL mit einem?
-Trennzeichen angehängt. Verwenden Sie diese Methode, wenn das Formular keine Nebeneffekte hat.dialog
: Wenn das Formular in einem<dialog>
ist, wird der Dialog geschlossen und einsubmit
-Ereignis bei der Übermittlung ausgelöst, ohne Daten zu übermitteln oder das Formular zu leeren.
Dieser Wert wird durch
formmethod
-Attribute bei<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 das Formular daher validiert wird), kann es durch ein
formnovalidate
-Attribut bei 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 Formularübermittlung angezeigt wird. Es ist ein Name oder Schlüsselwort für einen Browsing-Kontext (z. B. Tab, Fenster oder iframe). Die folgenden Schlüsselwörter haben spezielle Bedeutungen:
_self
(standardmäßig): In denselben Browsing-Kontext wie den aktuellen laden._blank
: In einem neuen, unbenannten Browsing-Kontext laden. Dies bietet dasselbe Verhalten wie das Setzen vonrel="noopener"
, waswindow.opener
nicht setzt._parent
: In den übergeordneten Browsing-Kontext des aktuellen laden. Hat keine übergeordnete Ebene, verhält sich wie_self
._top
: In den obersten Browsing-Kontext laden (d. h. den Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen Eltern hat). Hat keine übergeordnete Ebene, verhält sich wie_self
._unfencedTop
: Lädt die Antwort eines Formulars in einem eingebetteten fenced frame in den obersten Frame (d. h. über das Wurzelverzeichnis des eingerahmten Rahmen hinausgehend, im Gegensatz zu anderen reservierten Zielen). Nur verfügbar in eingerahmten Rahmen.
Dieser Wert kann durch ein
formtarget
-Attribut bei 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, greifbarer Inhalt |
---|---|
Erlaubter Inhalt |
Fließender Inhalt, jedoch ohne <form> -Elemente
|
Tag-Auslassung | Keine, sowohl das Start- als auch das 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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
form | ||||||||||||
accept-charset | ||||||||||||
action | ||||||||||||
autocomplete | ||||||||||||
new-password value | ||||||||||||
one-time-code value | ||||||||||||
webauthn value | ||||||||||||
enctype | ||||||||||||
method | ||||||||||||
name | ||||||||||||
novalidate | ||||||||||||
rel | ||||||||||||
target |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
Siehe auch
- HTML-Formularleitfaden
- Andere Elemente, die beim Erstellen von Formularen verwendet werden:
<button>
,<datalist>
,<fieldset>
,<input>
,<label>
,<legend>
,<meter>
,<optgroup>
,<option>
,<output>
,<progress>
,<select>
,<textarea>
. - Eine Liste der Elemente im Formular abrufen:
HTMLFormElement.elements
- ARIA: Formrole
- ARIA: Suchrolle