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.
Dieses Tutorial bietet einen ersten Einblick, wie man ein Formular aufbaut und was beim Absenden passiert.
- 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.
- Benutzerfreundliche Gestaltung
- Beschriftungen
- browsereigene Validierung
- Gliederung mit fieldset und legend
- mehrschrittige Formulare
Inhaltsverzeichnis
Erste Schritte
HTML Formulare enthalten ein oder mehrere form-Elemente (englisch: form-associated elements). Damit ist nicht nur das form-Element selbst gemeint, sondern Elemente wie input oder button, mit denen der Benutzer des Formulars interagiert.
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.
Anwendungsbeispiel: Suchformular
Schauen wir uns zum Einstieg ein einfaches Suchformular an, mit dem eine Volltextsuche im SELF-Wiki ausgeführt werden kann. Es besteht aus einem label-Element (auf dessen Zweck wir später genauer eingehen), einem input-Element mit dem Attribut type="search" sowie einem button-Element, das die Eingabe abschließt und das Formular zum Server sendet.
Es gibt eine Vielzahl an input-Elementtypen. search ist eine Variante von text, womit sich beliebiger Text eingeben lässt. Der Typ search weist darauf hin, dass der Text ein Suchbegriff sein soll, was einige Browser und Assistenztechniken nutzen, um die Darstellung anzupassen.
<form action="https://wiki.selfhtml.org/wiki/Spezial%3ASuche">
<label for="search">Suchbegriff: </label>
<input type="search" id="search" name="search">
<button name="fulltext" value="1">Finden</button>
</form>
Das input-Element besitzt außer type noch die Attribute id und name. Beide Attribute dienen zur Identifizierung des Elements, haben aber unterschiedliche Zwecke:
- Das
id-Attribut identifiziert das Element im DOM. Bei der Wahl der ids bist Du relativ frei. - Das
name-Attribut identifiziert das Element bei der Übertragung zum Server. Dieser Name muss mit dem Programmierer der Serverscripte abgestimmt sein. Normalerweise sollten alle Formular-Elemente unterschiedliche Namen haben (es gibt Ausnahmen).
name und id.
Und verwende für ein Element in einem Form niemals eine id, die für ein anderes Element als name genutzt wird!Auch das button-Element trägt einen Namen. Beim Absenden (submit) des Formulars werden Name und Wert desjenigen Buttons, der das Absenden ausgelöst hat, zum Server übertragen. Wenn es mehr als einen Button gibt, kann der Server dadurch unterscheiden, welcher Button verwendet wurde. Ob du den Buttons unterschiedliche Namen gibst oder den gleichen Namen mit unterschiedlichen Werten, ist dir überlassen.
Das form-Element besitzt ein action-Attribut. Hier trägt man den URL ein, der beim Absenden des Formulars aufgerufen werden soll, um die Formulardaten zu verarbeiten. Man kann es auch weglassen, dann wird das Formular an den gleichen URL gesendet, von dem das Formular abgerufen wurde (Grundlage für ein „Affenformular“).
Die Frage ist natürlich, woher du diesen URL kennen sollst, wenn du ein Formular auf deine Seite stellen willst. Wenn du den Serverteil des Formulars selbst programmierst, legst Du diesen URL selbst fest und programmierst deine Scripte entsprechend. Ist dies eine andere Person, muss sie dir den URL nennen. Im Fall unseres Suchformulars ist es so, dass der URL auf die Wiki-Seite Spezial:Suche verweist und diese Wiki-Seite für Formularanfragen ausgelegt ist. Wir haben lediglich den Formularteil dieser Seite auf das Nötigste zusammengestrichen.
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. Labels sind für Eingabeelemente zwingend erforderlich. Wir gehen darauf im nächsten Tutorial-Teil, Benutzerfreundliche Gestaltung, genauer 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
Formular-Elemente besitzen außer id und name noch das Attribut value. Sie steht für den Wert, der im Formular eingeben oder ausgewählt wurde und kann im HTML vorbelegt werden.
Wenn Daten von einem Formular an eine Zielseite übertragen werden sollen, so bildet der Browser eine Liste aller Eingabeelemente des Formulars, die ein name-Attribut tragen. Im Falle von Radiobuttons und Checkboxen werden nur diejenigen berücksichtigt, die aktiv („checked“) sind.
Auch der Button, mit dem du das Formular sendest, gelangt in diese Liste (wenn er ein name-Attribut hat). Außer durch einen Button-Klick kannst Du das Formular auch mit der ENTER-Taste absenden. In diesem Fall wird der erste der möglichen Buttons übertragen.
value-Attribut.Für jedes Element in dieser Liste wird ein Paar aus dem Namen und dem Wert der value-Eigenschaft dieses Elements gebildet. Dies ist entweder der Wert des value-Attributs im HTML, oder das, was in das Formular-Element eingegeben wurde. Diese Name-Wert Paare werden vom Browser als URL-Parameter codiert, so dass sie sicher übertragen werden können.
Ö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=Dein+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. Das Wiki benötigt den Parameter fulltext=1, um eine Volltextsuche durchzuführen und nicht gleich auf den ersten Treffer zu springen, der URL im action-Attribut darf aber keine Parameter enthalten. Der Browser verwirft sie.
Eine alternative Methode, beim Submit feste oder „geheime“ Parameter mitzugeben, sind input-Elemente mit type="hidden". Solche inputs werden nicht angezeigt, werden aber mit Name und Wert trotzdem übertragen.
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.
GET-Anfragen übertragen ihre Daten im URL. Ein wichtiger Aspekt von GET-Anfragen ist, dass sie gecached werden dürfen, eine gleichlautende GET-Anfrage also eventuell gar nicht ihren Weg bis zum Server findet.
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 das PHP-Tutorial „Formulare serverseitig auswerten“ mit dem Thema der richtigen Request-Methode.
Methode DIALOG
Mit Einführung des dialog-Elements wurde als weitere Möglichkeit die Einstellung method="dialog" eingeführt. Ein Formular, das Kindelement eines dialog-Elements ist, sendet bei Auswahl eines Submit-Buttons keine Daten an den Server, sondern schließt den Dialog. Darauf kann mit JavaScript reagiert und die Formulareingaben im Browser verarbeitet werden.
Wenn für den Button, der zum Schließen führte, ein value gesetzt wurde, wird dieser Wert in die returnValue-Eigenschaft des Dialogs übertragen.
Wir gehen auf Dialogformulare im Artikel Infobox/modale_Dialogfenster ein. Das Thema ist für diese Einführungsseite zu komplex und wird deshalb nicht weiter erwähnt.
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.
Elemente zur Eingabe von Werten
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 Schieberegler, 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.
Vordefinierte Werte
Man kann für Eingabe-Elemente einen Wert vorgeben, indem man das Attribut value damit befüllt. Dieser Wert wird vom Browser als Feldinhalt angezeigt. Sofern du nichts an dem Eingabeelement änderst, wird dieser Wert dann auch zum Server übertragen.
<form action="https://google.de/search">
<label>Suchbegriff: <input name="q" value="SELFHTML"></label>
<button name="b" value="Find!!!">Google</button>
</form>
Wenn du das Beispiel in einem neuen Browser-Tab oder -Fenster öffnest, 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!!!
Auswahlelemente
HTML bietet Radiobuttons (sinnvollerweise mehr als einen), Checkboxen, Auswahllisten zum Ausklappen und offene Auswahllisten an. Darauf gehen wir im Abschnitt Auswahllisten ein.
Buttons
Buttons sind im Allgemeinen Bedienelemente, 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 SELF-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- Standardwert wenn man das type-Attribut weglässt.
-
type="reset"Zurücksetzen eines Formulars - Zurücksetzen aller Formular-Elemente auf den vom HTML vorgegebenen Wert. Der Server bekommt das nicht mit.
-
type="button" - Keine eigene Funktion. Kann durch JavaScript mit clientseitigen Funktionen belegt werden
Die Typen submit und reset haben nur dann eine Funktion, wenn der Button einem Formular zugeordnet ist. Andernfalls geschieht nichts.
Ein Submit-Button überträgt den Formularinhalt an den URL, der im action-Attribut angegeben ist. Was der Server mit diesen Daten tut, ist seiner Programmlogik überlassen. Er kann damit rechnen oder sie abspeichern, und ob er danach eine Bestätigungsseite schickt, eine Auswertung basierend auf den Formulardaten oder einfach das Formular mit gleichen oder anderen Werten wieder ausgibt, wird vom Serverprogrammierer festgelegt.
Manchmal möchte man einem Benutzer mehr als eine Aktion anbieten und verwendet dafür zwei verschiedene Buttons. Will man z. B. dem Server sagen, ob der Button „Löschen“ oder stattdessen der Button „Bearbeiten“ benutzt wurde, kann man den Buttons einen Namen geben und unterschiedliche value-Attribute setzen. Der verwendete Button sendet dann unter seinem Namen diesen Wert an den Server.
<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 Name-Wert-Paar task=delete. Betätigt man hingegen den Button „Bearbeiten“, erhält der Server das Name-Wert-Paar task=edit.
submit – 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.
reset – Zurücksetzen
In einigen der folgenden Beispiele gibt es neben einem Absende-Button auch einen Reset-Button, der die bereits eingegebenen Werte wieder zurücksetzt:
reset zurücksetzen?
ansehen …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.
Clientseitige Aktionen auslösen
Ein Button des Typs button kann genutzt werden, um eine Aktion mit JavaScript auszulösen, beispielsweise eine Berechnung, ohne dass dazu Daten an den Server gesendet oder werden müssen. So kann innerhalb eines Formulars ein Klick auf einen Button weitere Eingabefelder erzeugen oder sichtbar machen, ohne dass das Formular abgesendet werden soll.
In die input-Elemente lassen sich Masse und Körpergröße eingeben.
Der Button erhält ein type="button"-Attribut. 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.
- Eingaben clientseitig mit JavaScript auswerten
- value-Eigenschaft
- Element ansprechen
- Slider mit Ergebnisausgabe
- DOM-Manipulation
- Elemente dynamisch
- erzeugen
- entfernen
- Beispiel: ToDo-Liste
- WebStorage
- Elemente dynamisch
Siehe auch
- Benutzerfreundliche Gestaltung
- Beschriftungen
- browsereigene Validierung
- Gliederung mit fieldset und legend
- mehrschrittige Formulare
- Auswahllisten
- Radio-Buttons
- Checkboxen
- select und option
- Formulare serverseitig auswerten
- Erwartung an Daten formulieren
- GET und POST
Weblinks
- ↑ SELFHTML-Blog: input oder button für submit-Elemente?
