HTML/Tutorials/Formulare/Was ist ein Webformular?

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

Beachten Sie: Webseiten sind für Menschen gemacht. In Formularen spielt die Nutzerführung eine besonders große Rolle. Oft genug geben Benutzer entnervt auf, was nicht nur den Benutzer, sondern auch den Seitenersteller frustriert, da z.B. ein Online-Shop von zufriedenen Kunden lebt.
  • Erheben Sie nur die Daten, die Sie unbedingt benötigen!
  • Geben Sie Hilfen beim Ausfüllen des Formulars und bei der Korrektur falsch ausgefüllter Felder.
  • Fassen Sie Gruppen zusammengehörender Felder zusammen.
Siehe auch: HTML/Tutorials/Formulare/Benutzereingaben zugänglich gestalten
Hinweis:
Wenn Sie persönliche Daten erheben, müssen Sie darauf in Ihrer Datenschutzerklärung hinweisen.

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.

Einfaches Suchformular (Suche hier im Wiki) ansehen …
<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>
Sie sehen, 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, sehen Sie im action-Attribut des form-Elements. Die Frage ist natürlich, woher Sie einen solchen URL kennen sollen, wenn Sie ein Formular auf Ihre Seite stellen wollen. Wenn Sie Kenntnisse der Serverprogrammierung erwerben, wird sich diese Frage für Sie 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 Ihrem 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, HTML/Tutorials/Formulare/Beschriftungen, genauer ein.

Statt eines Buttons können Sie 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 Sie das Formular senden, 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 setzen Sie 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. Öffnen Sie doch einmal das obige selfwiki-Suchformular in einem neuen Browser-Tab oder -Fenster (klicken Sie mit der rechten Maustaste auf "Vorschau" und wählen Sie "in neuem Fenster öffnen"). Geben Sie einen Suchbegriff ein und klicken Sie auf "Finden", und betrachten Sie danach die Adresszeile Ihres Browsers! Dort sollte so etwas wie "https://wiki.selfhtml.org/wiki/Spezial%3ASuche?search=Ihr+Suchbegriff&fulltext=1 stehen. Sie sehen sowohl den Inhalt des Eingabefeldes, als auch name und value des Buttons, mit dem Sie das Formular verschickt haben.

Ü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ürden Sie bei method="post" Ihren 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. Sie finden an dieser Stelle nur einen kurzen Anriss und weiter führende Links. Alle Artikel sind auf der Einstiegsseite zu den Formular-Tutorials verlinkt.

Eingaben aller Art

HTML stellt Ihnen das input-Element zur Verfügung. Dieses hat ein Attribut namens type, wodurch das input-Element sich sehr unterschiedlich darstellen und verhalten kann. Mit dem input-Element stellen Sie Eingabefelder für Texte und Zahlen dar, es zeigt sich als Checkbox oder Radiobutton, oder bietet Ihnen die Möglichkeit zum Hochladen von Dateien oder Auswählen von Farben. Eine genauere Beschreibung des input-Elements und all seiner Variationen finden Sie in einem eigenen Artikel.

Für umfangreichere Texteingaben bietet sich das textarea-Element an.

Auswahllisten

Auswahllisten gestalten Sie entweder mit Hilfe des datalist-Elements, was im Abschnitt zu Suchformularen näher erläutert wird.

Für kurze Auswahllisten empfiehlt sich dagegen die 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
Beachten Sie: Die voreingestellte Funktionalität eines Buttons ist das Versenden eines Formulars (submit, engl. einreichen, vorlegen). Innerhalb eines form-Elements führt dies zum Absenden des Formulars. Die eingegebenen Daten werden zum Server geschickt und dort verarbeitet, und es ist der Serverlogik überlassen, ob Sie das Formular danach noch einmal mit diesen Daten angezeigt bekommen oder ob Ihre Eingaben verloren sind. Will man einen Button, der das Formular nicht sendet, sondern im Browser eine JavaScript-Aktion auslöst, so benötigt das 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.

benannte Buttons
<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“.
Beachten Sie: Buttons sollten nie mit einem a-Element mit javascript:function () realisiert werden, da dies gegen die Trennung von Inhalt, Präsentation und Verhalten verstößt. Falls das JavaScript nicht geladen wird, bleibt die Seite funktionsunfähig.


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.

Suchformular mit vorausgefüllten Werten ansehen …
<form action="https://google.de/search">
  <label>Suchbegriff <input name="q" value="SELFHTML"></label>
  <button name="b" value="Find!!!">Volltextsuche</button>
</form>
Wenn Sie das Beispiel in einem neuen Browser-Tab oder -Fenster öffnen, dann können Sie 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 Sie den Wert nicht verändert haben) den Wert „SELFHTML“, b hat den Wert „Find!!!“. In der Adresszeile finden Sie also google.de/search?q=SELFHTML&b=Find!!!

Absenden eines Formulars

Ein Button des Typs submit sendet nach Betätigen ein Formular ab.

Beispiel ansehen …
<h1>IP-Adresse oder Uhrzeit</h1> <p>Sie können die eingegebenen Daten an ein Script senden. Dabei werden keine Daten gespeichert.</p> <form action="/extensions/Selfhtml/show-request-params.php" method="post" autocomplete="off"> <label for="vorname">Vorname</label> <input id="vorname" name="vorname" maxlength="100"> <label for="name">Name</label> <input id="name" name="name" maxlength="100"> <button type="submit" name="action" value="0">IP-Adresse</button> <button type="submit" name="action" value="1">Uhrzeit</button> </form>
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.
Beachten Sie: submit ist der Standardwert für type, Sie können 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.

Beachten Sie: Standardverhalten beim Absenden des Formulars (meist durch einen 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.

Beispiel ansehen …
<form> <label for="groesse">Größe: <input id="groesse" type="number" min="100" max="220" step="1" value="175"> cm</label> <br> <label for="masse">Masse: <input id="masse" type="number" min="30" max="225" step="0.1" value="75"> kg</label> <br> <label>BMI: <output id="bmi"></output> </label> <br> <button type="button" id="berechnen">BMI berechnen</button> </form>
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 oder Zurück-Taste

In einigen der folgenden Beispiele gibt es neben einem Absende-Button auch einen Reset-Button, der die bereits eingegebenen Werte wieder zurücksetzt:

Labels beschriften Eingabefelder ansehen …
<form> <label for="vorname">Vorname</label> <input id="vorname"> <label for="zuname">Zuname</label> <input id="zuname"> <button type="reset">Eingaben zurücksetzen</button> <button type="submit">Eingaben absenden</button> </form>

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.

Formulare zurücksetzen

Ein Button des Typs reset setzt ein Formular zurück.

Beispiel ansehen …
<form id="form1"> <h2>Formular 1 - ohne Vorbelegung</h2> … </form> <form id="form2"> <h2>Formular 2 - mit Vorbelegung</h2> … </form> <p> <button form="form1" type="reset">Formular 1 zurücksetzen</button> <button form="form2" type="reset">Formular 2 zurücksetzen</button> </p>
Das Beispiel enthält zwei Formulare und für jedes einen Reset-Button. Dazu hat jeder Button ein form-Attribut, das die ID des entsprechenden Formulars enthält und so die Zuordnung Button-Formular sicherstellt.

Durch Klick auf einen Reset-Button wird ein Formular auf die ursprünglichen Werte zurückgesetzt.

Beachten Sie: Die Möglichkeit des Zurücksetzens von Formularen stellt nur in wenigen Fällen tatsächlich eine Verbesserung der Benutzerfreundlichkeit dar. Wer ein Formular nicht absenden möchte, der kann die Seite einfach verlassen; wer jedoch versehentlich ein umfangreiches Formular leert, ist zu Recht frustriert.

Siehe auch

Referenz:

Quellen

  1. SELFHTML-Blog: input oder button für submit-Elemente?