HTML Eingabeformular* Attribute
In diesem Kapitel werden die verschiedenen form*-Attribute für das HTML-Element <input> beschrieben.
Das form Attribut
Das Eingabeattribut form gibt die Form an, zu der das Element <input> gehört.
Der Wert dieses Attributs muss dem id-Attribut des <form>-Elements entsprechen, zu dem es gehört.
Beispiel
Ein Eingabefeld, das sich außerhalb des HTML-Formulars befindet (aber immer noch Teil des Formulars ist):
<form action="/action_page.html" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
Try it Yourself »
Das formaction Attribut
Das Eingabeattribut formaction gibt die URL der Datei an, die die Eingabe verarbeitet, wenn das Formular gesendet wird.
Hinweis: Dieses Attribut überschreibt das Attribut action des <form> Element.
Das Attribut formaction funktioniert mit den folgenden Eingabetypen: submit und image (Senden und Bild).
Beispiel
Ein HTML-Formular mit zwei Absenden-Schaltflächen mit unterschiedlichen Aktionen:
<form action="/action_page.html">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.html" value="Submit as Admin">
</form>
Try it Yourself »
Das formenctype Attribut
Das Eingabeattribut formenctype gibt an, wie die Formulardaten bei der Übermittlung codiert werden sollen (nur für Formulare mit method="post").
Hinweis: Dieses Attribut überschreibt das enctype-Attribut des <form>-Elements.
Das Attribut formenctype funktioniert mit den folgenden Eingabetypen: submit und image.
Beispiel
Ein Formular mit zwei Absenden-Buttons. Der erste sendet die Formulardaten mit der Standardcodierung, der zweite sendet die Formulardaten codiert als "multipart/form-data":
<form action="/action_page_binary.asp" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
Try it Yourself »
Das formmethod-Attribut
Das Eingabeattribut formmethod definiert die HTTP-Methode zum Senden von Formulardaten an die Aktions-URL.
Hinweis: Dieses Attribut überschreibt das Methodenattribut des Elements <form>.
Das Attribut formmethod funktioniert mit den folgenden Eingabetypen: submit und image.
Die Formulardaten können als URL-Variablen (method="get") oder als HTTP-Post-Transaktion gesendet werden (method="post").
Hinweise zur Methode "get":
- Diese Methode hängt die Formulardaten in Name/Wert-Paaren an die URL an
- Diese Methode ist nützlich für Formularübermittlungen, bei denen ein Benutzer das Ergebnis mit einem Lesezeichen versehen möchte
- Es gibt eine Grenze dafür, wie viele Daten Sie in eine URL einfügen können (variiert je nach Browser), daher können Sie nicht sicher sein, dass alle Formulardaten korrekt übertragen werden
- Verwenden Sie niemals die Methode "get", um vertrauliche Informationen weiterzugeben! (Passwort oder andere vertrauliche Informationen werden in der Adressleiste des Browsers angezeigt)
Hinweise zur Methode "post":
- Diese Methode sendet die Formulardaten als HTTP-Post-Transaktion
- Formulareinsendungen mit der "post"-Methode können nicht mit einem Lesezeichen versehen werden
- Die Methode „post“ ist robuster und sicherer als "get", und für "post" gibt es keine Größenbeschränkungen
Beispiel
Ein Formular mit zwei Absenden-Buttons. Der erste sendet die Formulardaten mit method="get". Der zweite sendet die Formulardaten mit method="post":
<form action="/action_page.html" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit using GET">
<input type="submit" formmethod="post" value="Submit using POST">
</form>
Try it Yourself »
Das formtarget-Attribut
Das Eingabeattribut formtarget gibt einen Namen oder ein Schlüsselwort an, das angibt, wo die Antwort angezeigt werden soll, die nach dem Absenden des Formulars empfangen wird.
Hinweis: Dieses Attribut überschreibt das Zielattribut des Elements <form>.
Das Attribut formtarget funktioniert mit den folgenden Eingabetypen: submit und image.
Beispiel
Ein Formular mit zwei Absenden-Schaltflächen und unterschiedlichen Zielfenstern:
<form action="/action_page.html">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
Try it Yourself »
Das formnovalidate-Attribut
Das Eingabeattribut formnovalidate gibt an, dass ein <input>-Element bei der Übermittlung nicht validiert werden soll.
Hinweis: Dieses Attribut überschreibt das novalidate-Attribut des <form>-Elements.
Das Attribut formnovalidate funktioniert mit den folgenden Eingabetypen: submit (senden).
Beispiel
Ein Formular mit zwei Absenden-Buttons (mit und ohne Validierung):
<form action="/action_page.html">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate="formnovalidate"
value="Submit without validation">
</form>
Try it Yourself »
Das novalidate-Attribut
Das Attribut novalidate ist ein Attribut <form>.
Wenn vorhanden, gibt novalidate an, dass nicht alle Formulardaten bei der Übermittlung validiert werden sollen.
Beispiel
Geben Sie an, dass beim Absenden keine Formulardaten validiert werden sollen:
<form action="/action_page.html" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
HTML Formular- und Eingabeelemente
| Tag | Beschreibung |
|---|---|
| <form> | Definiert ein HTML-Formular für Benutzereingaben |
| <input> | Definieren Sie ein Eingabesteuerelement |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie unter HTML-Tag-Referenz auf unserer Website W3SchoolsDE. DasBeste.
