HTML -Formularattribute
In diesem Kapitel werden die verschiedenen Attribute für das HTML-Element <form> beschrieben.
Das Action attribut
Das Attribut action definiert die Aktion, die beim Absenden des Formulars ausgeführt werden soll.
Normalerweise werden die Formulardaten an eine Datei auf dem Server gesendet, wenn der Benutzer auf die Schaltfläche „Senden“ klickt.
Im folgenden Beispiel werden die Formulardaten an eine Datei namens „action_page.html“ gesendet. Diese Datei enthält ein serverseitiges Skript, das die Formulardaten verarbeitet:
Beispiel
Senden Sie beim Absenden die Formulardaten an "action_page.html":
<form action="/action_page.html">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
Tipp: Wenn das Attribut action weggelassen wird, wird die Aktion auf die aktuelle Seite festgelegt.
Das Target Attribut
Das Attribut target gibt an, wo die Antwort angezeigt werden soll, die nach dem Absenden des Formulars empfangen wird.
Das Attribut target kann einen der folgenden Werte haben:
| Wert | Beschreibung |
|---|---|
| _blank | Die Antwort wird in einem neuen Fenster oder Tab angezeigt |
| _self | Die Antwort wird im aktuellen Fenster angezeigt |
| _parent | Die Antwort wird im übergeordneten Frame angezeigt |
| _top | Die Antwort wird im gesamten Fenster angezeigt |
| framename | Die Antwort wird in einem benannten Iframe angezeigt |
Der Standardwert ist _self, was bedeutet, dass die Antwort im aktuellen Fenster geöffnet wird.
Beispiel
Hier wird das übermittelte Ergebnis in einem neuen Browser-Tab geöffnet:
<form action="/action_page.html" target="_blank">
Try it Yourself »
Das Method Attribut
Das Attribut method gibt die HTTP-Methode an, die beim Senden der Formulardaten verwendet werden soll.
Die Formulardaten können als URL-Variablen (mit method="get") oder als HTTP-Post-Transaktion (mit) gesendet werden method="post").
Die Standard-HTTP-Methode beim Senden von Formulardaten ist GET.
Beispiel
In diesem Beispiel wird beim Senden der Formulardaten die GET-Methode verwendet:
<form action="/action_page.html" method="get">
Try it Yourself »
Beispiel
In diesem Beispiel wird beim Senden der Formulardaten die POST-Methode verwendet:
<form action="/action_page.html" method="post">
Try it Yourself »
Hinweise zu GET:
- Hängt die Formulardaten in Name/Wert-Paaren an die URL an
- Verwenden Sie GET NIEMALS zum Senden sensibler Daten! (Die übermittelten Formulardaten sind in der URL sichtbar!)
- Die Länge einer URL ist begrenzt (2048 Zeichen)
- Nützlich für Formularübermittlungen, bei denen ein Benutzer das Ergebnis mit einem Lesezeichen versehen möchte
- GET eignet sich für nicht sichere Daten wie Abfragezeichenfolgen in Google
Hinweise zum POST:
- Hängt die Formulardaten innerhalb des Hauptteils der HTTP-Anfrage an (die übermittelten Formulardaten werden nicht in der URL angezeigt)
- POST unterliegt keinen Größenbeschränkungen und kann zum Senden großer Datenmengen verwendet werden.
- Formulareinsendungen mit POST können nicht mit Lesezeichen versehen werden
Tipp: Verwenden Sie immer POST, wenn die Formulardaten sensible oder persönliche Informationen enthalten!
Das Autocomplete-Attribut
Das Attribut autocomplete gibt an, ob für ein Formular die automatische Vervollständigung aktiviert oder deaktiviert sein soll.
Wenn die automatische Vervollständigung aktiviert ist, vervollständigt der Browser automatisch Werte basierend auf Werten, die der Benutzer zuvor eingegeben hat.
Beispiel
Ein Formular mit automatischer Vervollständigung für:
<form action="/action_page.html" autocomplete="on">
Try it Yourself »
Das Novalidate-Attribut
Das Attribut novalidate ist ein boolesches Attribut.
Wenn vorhanden, gibt es an, dass die Formulardaten (Eingabe) bei der Übermittlung nicht validiert werden sollen.
Beispiel
Ein Formular mit einem Novalidate-Attribut:
<form action="/action_page.html" novalidate>
Try it Yourself »
HTML Übungen
Liste aller <form>-Attribute
| Attribut | Beschreibung |
|---|---|
| accept-charset | Geben Sie die Zeichenkodierungen an, die für die Formularübermittlung verwendet werden |
| action | Geben Sie an, wohin die Formulardaten gesendet werden sollen, wenn ein Formular gesendet wird |
| autocomplete | Geben Sie an, ob für ein Formular die automatische Vervollständigung aktiviert oder deaktiviert sein soll |
| enctype | Geben Sie an, wie die Formulardaten kodiert werden sollen, wenn sie an den Server übermittelt werden (nur für method="post") |
| method | Geben Sie die HTTP-Methode an, die beim Senden von Formulardaten verwendet werden soll |
| name | Geben Sie den Namen des Formulars an |
| novalidate | Geben Sie an, dass das Formular beim Absenden nicht validiert werden soll |
| rel | Gibt die Beziehung zwischen einer verknüpften Ressource und dem aktuellen Dokument an |
| target | Geben Sie an, wo die Antwort angezeigt werden soll, die nach dem Absenden des Formulars eingeht |
