Formulare/Was ist ein Webformular?
- 30min
- einfach
- Kenntnisse in
Ein Webformular ist eine organisierte Sammlung von Elementen, die dem Anwender erlauben, Daten anzugeben, zu verändern, auszuwählen oder mit diesen zu interagieren.
Ein Webformular dient zum Beispiel dem Versand von Daten, die an eine E-Mail-Adresse oder eine Software geschickt werden. Formulare werden mit dem form-Element erzeugt. Alle in diesem Element enthaltenen Eingabe-Elemente werden beim Versand berücksichtigt. Die eingegebenen Daten bzw. vorgegebene Werte werden an die Zieladresse übermittelt. Die Zieladresse notiert man im action-Attribut des form-Elements.
Inhaltsverzeichnis
- Erhebe nur die Daten, die du unbedingt benötigst!
- Gib Hilfen beim Ausfüllen des Formulars und bei der Korrektur falsch ausgefüllter Felder.
- Fasse Gruppen zusammengehörender Felder zusammen.
→ Formulare/Benutzereingaben zugänglich gestalten
Formular-Versand
Angaben für die Datenübertragung
Eingabe-Elemente brauchen einen Namen, damit der eingegebene Wert bzw. Inhalt von der empfangenden Seite (eine serverseitige Software) „verstanden“ werden kann. Nur so kann der Empfänger z. B. Benutzernamen und Passwort auseinander halten.
Das …
-
name-Attribut gibt einem Eingabefeld oder Button einen eindeutigen Namen -
value-Attribut enthält den Wert eines Formular-Elements. Es wird entweder durch den Benutzer eingegeben und vom Browser ausgelesen; kann aber auch im HTML-Dokument vorbelegt werden.
Anwendungsbeispiel: Suchformular
Schauen wir uns zum Einstieg ein einfaches Suchformular an. Es führt eine Volltextsuche hier im selfhtml Wiki durch. Es besteht aus einem label-Element (auf dessen Zweck wir später genauer eingehen), einem input-Element mit dem Typ search (was im Prinzip nichts anderes als der Typ text ist, aber auf manchen Geräten machen die Browser einen Unterschied im Aussehen) sowie einem Button, der zum Absenden dient.
<form action="https://wiki.selfhtml.org/wiki/Spezial%3ASuche">
<label for="suche">Suchbegriff: </label>
<input type="search" id="suche" name="search">
<button name="fulltext" value="1">Finden</button>
</form>
Du siehst, dass das input-Element das Attribut name="search" trägt. Das ist der Name, unter dem sein Wert zum Server geschickt wird. Auch der Button trägt einen Namen. Der Server kann dadurch bei mehr als einem Button auf dem Formular erkennen, welcher Button den Sendevorgang ausgelöst hat.
Die Adresse, an die der Suchauftrag geschickt werden soll, siehst du im action-Attribut des form-Elements. Die Frage ist natürlich, woher du einen solchen URL kennen sollen, wenn du ein Formular auf deine Seite stellen willst. Wenn du Kenntnisse der Serverprogrammierung erwirbst, wird sich diese Frage für dich von selbst beantworten. Wenn der Serverteil von jemand anderes programmiert wird, wird sie (oder er) auch diese Frage beantworten können.
Das label-Element sagt deinem Anwender, welchen Zweck das zugeordnete Eingabefeld hat. Diese Zuordnung erfolgt über das for-Attribut, das dem id-Attribut des so beschrifteten Eingabefeldes entsprechen muss. Wir gehen auf Labels im nächsten Tutorial-Teil, Benutzereingaben zugänglich gestalten, genauer ein.
Statt eines Buttons kannst du auch ein input-Element mit type="submit" verwenden. Diese Methode existiert aus historischen Gründen[1], jedoch sollte man heute für einen Button das passend benannte button-Element verwenden.
Die Datenübertragung
Wenn Daten von einem Formular an eine Zielseite übertragen werden sollen, so bildet Ihr Browser eine Liste aller Eingabeelemente des Formulars, die ein name-Attribut tragen. Der Button, mit dem du das Formular sendest, gelangt ebenfalls in diese Liste (wenn er ein name-Attribut hat). Für jedes Element in dieser Liste wird ein Paar aus den Namen und dem Wert der value-Eigenschaft dieses Elements gebildet. Diese Eigenschaft setzt du entweder im HTML, oder der Browser stellt ihren Wert an Hand der Eingabe im Eingabeelement zur Verfügung. Diese Schlüssel-Wert Paare (key-value pairs) werden nun vom Browser zu einer langen Zeichenkette zusammengesetzt und an den Server gesendet. Öffne doch einmal das obige selfwiki-Suchformular in einem neuen Browser-Tab oder -Fenster (klicken mit der rechten Maustaste auf "Vorschau" und wähle "in neuem Fenster öffnen"). Gib einen Suchbegriff ein und klicke auf "Finden", und betrachte danach die Adresszeile deines Browsers! Dort sollte so etwas wie "https://wiki.selfhtml.org/wiki/Spezial%3ASuche?search=Ihr+Suchbegriff&fulltext=1 stehen. Du siehst sowohl den Inhalt des Eingabefeldes, als auch name und value des Buttons, mit dem du das Formular verschickt hast.
Übrigens ist das Übertragen von name und value des geklickten Buttons der Grund, warum der Button im obigen Beispiel überhaupt einen Namen bekommen hat. Ein action-Attribut, dessen URL bereits Parameter enthält, funktioniert nicht. Früher erzeugten die Browser dann kaputte URLs mit zwei Fragezeichen, und heute werfen sie den Parameterteil des action-URL einfach weg. Das Wiki braucht aber den zusätzlichen Parameter fulltext=1, um eine Volltextsuche durchzuführen und nicht gleich auf den ersten Treffer zu springen.
Methode POST oder GET?
Es gibt zwei unterschiedliche HTTP-Methoden, mit denen man die Formulardaten an den Server übermitteln kann. Diese werden mit POST und GET bezeichnet. Ohne hier auf die technischen Aspekte einzugehen, gilt die Faustregel: Ist es der vorrangige Sinn des Formulars, Daten vom Server abzurufen (z. B. eine Suchanfrage), so verwendet man GET; ist der Hauptzweck eher das Übermitteln von Daten zum Server (z. B. das Abschicken einer Bestellung an einen Online-Shop), so verwendet man POST.
Die GET-Methode ist der voreingestellte Wert (default), der automatisch gilt, wenn kein method-Attribut notiert wurde. Möchte man die POST-Methode nutzen, so muss method="post" im öffnenden form-Tag notiert werden.
POST-Anfragen übertragen ihre Daten nicht im URL, sondern auf eine andere Weise. Deshalb würdest du bei method="post" deinen Suchbegriff in der Adresszeile nicht finden.
Umfassender befasst sich der Beitrag „PHP/Tutorials/Formulardaten serverseitig auswerten“ mit der Frage.
Eingabeelemente eines Formulars
Formulare sind ein komplexes Thema, dessen Beschreibung auf etliche Seiten verteilt werden muss. Du findest an dieser Stelle nur einen kurzen Anriss und weiter führende Links. Alle Artikel sind auf der Einstiegsseite zu den Formular-Tutorials verlinkt.
HTML stellt dir das input-Element zur Verfügung. Dieses hat ein Attribut namens type, wodurch es sich sehr unterschiedlich darstellen und verhalten kann. Mit dem input-Element stellst du Eingabefelder für Texte und Zahlen dar, es zeigt sich als Checkbox oder Radiobutton, oder bietet dir die Möglichkeit zum Hochladen von Dateien oder Auswählen von Farben. Eine genauere Beschreibung des input-Elements und all seiner Variationen findest du hier:
Übersicht über die verschiedenen Eingabefelder.
Für mehrzeilige Texteingaben bietet sich das textarea-Element an.
Auswahllisten gestaltest du entweder mit Radio-Buttons, Checkboxen oder einer Kombination aus select- und option-Elementen, worauf im Abschnitt zu Auswahllisten eingegangen wird.
Buttons
Buttons sind im Allgemeinen Bedienfelder, mit denen eine Aktion ausgelöst werden kann. Für sie sollten stets die semantisch passenden Elemente wie das button-Element verwendet werden. Gründe für seinen Einsatz werden im Selfhtml Blog-Artikel input oder button für submit-Elemente? genannt.
Es gibt drei verschiedene Arten von Buttons, gekennzeichnet durch das type-Attribut:
-
type = "submit", Absenden eines Formulars, default-Wert -
type = "button", Auslösen clientseitiger Aktionen -
type = "reset", Zurücksetzen eines Formulars
button-Element das Attribut type="button".Manchmal möchte man einem Benutzer zweierlei Aktionen anbieten und verwendet dafür zwei verschiedene Buttons. Will man dem Server sagen, ob man z. B. den Button „Löschen“ oder stattdessen den Button „Bearbeiten“ benutzt hat, kann man einem Button ebenso einen Namen geben, der dann bei Betätigung als Schlüssel an den Server übertragen wird.
<button name="task" value="delete">Löschen</button>
<button name="task" value="edit">Bearbeiten</button>
Betätigt man den Button „Löschen“, erhält der Server das Schlüssel-Wert-Paar „task=delete“. Betätigt man hingegen den Button „Bearbeiten“, erhält der Server das Schlüssel-Wert-Paar „task=edit“.
Vordefinierte Werte
Man kann für Texteingabe-Elemente einen vordefinierten Wert vorgeben, indem man das Attribut value damit befüllt. Buttons können auch einen Wert übertragen, wenn man ihnen ein solches Attribut gibt.
<form action="https://google.de/search">
<label>Suchbegriff <input name="q" value="SELFHTML"></label>
<button name="b" value="Find!!!">Volltextsuche</button>
</form>
Wenn du das Beispiel in einem neuen Browser-Tab oder -Fenster öffnen, dann kannst du nach dem Klick auf den Button in der Adresszeile des Browsers sehen, dass sowohl ein URL-Parameter q, als auch ein URL-Parameter b übertragen werden. q hat (sofern du den Wert nicht verändert hast) den Wert „SELFHTML“, b hat den Wert „Find!!!“. In der Adresszeile findest du also google.de/search?q=SELFHTML&b=Find!!!
Absenden eines Formulars
Ein Button des Typs submit sendet nach Betätigen ein Formular ab.
In diesem Beispiel gibt es zwei submit-Buttons. Abhängig vom gewählten Button wird im serverseitigen Script für den Parameter "action" (der Wert des jeweiligen name-Attributes) eine null (für IP-Adresse) oder eine eins (für Uhrzeit) angezeigt. Die serverseitige Programmlogik müsste so gestaltet werden, dass sie die gewünschten Daten entsprechend ausgibt, was unser universell gehaltenes Script aber nicht leistet.
Außerdem wird durch autocomplete="off" unterbunden, dass die eingegebenen Werte gespeichert werden und so browserweit als Vorschläge für künftige Eingaben in Elemente gleichen Namens zur Verfügung stehen.
submit ist der Standardwert für type, du kannst es also auch weglassen.Durch Klick auf einen submit-Button wird ein Formular abgesendet, das heißt, die Daten des Formulars werden übertragen. Dabei werden lediglich name-value-Paare übertragen. Die Attribute action, method und enctype des (zugeordneten) form-Elements legen fest, an welche Adresse, mit welcher Übertragungsform (get oder post) und in welcher Codierung die Übertragung erfolgt.
button type="submit") ist, dass die Seite neu geladen wird. Dies kann mit preventDefault verhindert werden.
Clientseitige Aktionen auslösen
Ein Button des Typs button löst eine clientseitige Aktion aus, beispielsweise eine Berechnung mit JavaScript, ohne dass dazu Daten versendet oder empfangen werden.
In die input-Elemente lassen sich Masse und Körpergröße eingeben. Ein Klick auf den Button löst die JavaScript-Funktion berechne_BMI aus, die aus den eingegebenen Werten den Body-Mass-Index errechnet und das Ergebnis in das output-Element einträgt.
document.querySelector('#berechnen').addEventListener('click', berechne_BMI);
function berechne_BMI () {
var groesse = parseInt(document.getElementById("groesse").value),
masse = parseInt(document.getElementById("masse").value),
bmi = Math.round(100000 * masse / (groesse * groesse)) / 10;
document.querySelector("output").textContent = bmi;
}
Der Button erhält mit addEventListener eine Klickfunktionalität. Ein Klick auf den Button löst die JavaScript-Funktion berechne_BMI aus, die aus den eingegebenen Werten den Body-Mass-Index errechnet und das Ergebnis in das output-Element einträgt.
Reset-Buttons
In einigen der folgenden Beispiele gibt es neben einem Absende-Button auch einen Reset-Button, der die bereits eingegebenen Werte wieder zurücksetzt:
Heute hat sich eigentlich durchgesetzt, auf einen Reset-Button zu verzichten, da der Benutzer auch durch die Zurück-Taste des Browsers oder das Schließen des Tabs das Formular verlassen kann. Außerdem könnte er aus Versehen den Reset-Button erwischen und so anstatt auf den Absenden-Button zu klicken seine getätigten Eingaben verlieren. In Ausnahmefällen könnte ein Reset-Button jedoch dennoch sinnvoll sein.
Siehe auch
Referenz:
Quellen
- ↑ SELFHTML-Blog: input oder button für submit-Elemente?
