HTML/Tutorials/Formulare/Was ist ein Webformular?

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Formulare(Weitergeleitet von Value)
Wechseln zu: Navigation, Suche

Ein Webformular dient 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.

Formular-Versand[Bearbeiten]

Angaben für die Datenübertragung[Bearbeiten]

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[Bearbeiten]

Beispiel: Einfaches Suchformular (Suche in Google) ansehen …
<form action="https://google.de/search">
  <label for="q">Suchbegriff</label>
  <input id="q" name="q">
  <button>finden</button>
</form>
Das Beispiel enthält ein kleines Suchformular.

Das form-Element hat ein action-Attribut mit der URL von Google.

Ein label dient als Beschriftung des input-Elements. Dieses input-Element enthält ein name-Attribut mit dem Wert „q“,, der für die Datenübertragung benötigt wird.

Die ID hat ebenfalls den Wert „q“, welcher sich im for-Attribut des label-Elements wiederfindet.

Ein button ermöglicht das Absenden des Formulars.

HTML stellt für das Abschicken von Formularen aus historischen Gründen zwei Möglichkeiten bereit[1], jedoch sollte man für einen Button das passend benannte button-Element verwenden.

Mehr über Beschriftungen von Eingabefeldern erfahren Sie im Kapitel: HTML/Tutorials/Formulare/Beschriftungen

Die Datenübertragung[Bearbeiten]

Wenn Daten von einem Formular an eine Zielseite übertragen werden sollen, so werden alle Werte der Eingabe-Elemente mit einem Schlüssel, dem Inhalt des jeweiligen name-Attributs, als Schlüssel-Wert-Paar (key-value-pair) übertragen. Öffnen Sie doch einmal das obige Google-Suchformular in einem neuen Browser-Tab oder -Fenster und beachten Sie (natürlich nach dem Absenden auf der Google-Trefferseite) den URL-Parameter „q“ in der Adresszeile Ihres Browsers! Dort sollte so etwas wie google.de/search?q=Ihr+Suchbegriff stehen.

Methode POST oder GET?[Bearbeiten]

Es gibt zwei unterschiedliche HTTP-Methoden, wie die Formulardaten an den Server übermittelt werden. 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.

Umfassender befasst sich der Beitrag „PHP/Tutorials/Formulardaten serverseitig auswerten“ mit der Frage.

Funktionsweise von Buttons[Bearbeiten]

Die voreingestellte Funktionalität eines Buttons ist das Versenden eines Formulars (submit, engl. einreichen, vorlegen). Will man eine andere Funktionalität, so benötigt das button-Element einen passenden Wert im type-Attribut.

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 „löschen“- oder stattdessen den „bearbeiten“-Button benutzt hat, kann man einem Button ebenso einen Namen geben, welcher dann bei Betätigung als Schlüssel an den Server übertragen wird.

Beispiel: benannte Buttons
<button name="task" value="delete">löschen</button>
<button name="task" value="edit">bearbeiten</button>
Betätigt man den „löschen“-Button, erhält der Server das Schlüssel-Wert-Paar „task=delete“, betätigt man hingegen den „bearbeiten“-Button, erhält der Server das Schlüssel-Wert-Paar „task=edit“.

Vordefinierte Werte[Bearbeiten]

Man kann für Texteingabe-Elemente einen vordefinierten Wert vorgeben, indem man das value-Attribut damit befüllt. Buttons können auch einen Wert übertragen, wenn man ihnen ein solches Attribut gibt.

Beispiel: 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!!!">finden</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!!!

Reset-Buttons oder Zurück-Taste[Bearbeiten]

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

Beispiel: 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="reset">Eingaben absenden</button> </form>

Heute hat sich eigentlich durchgesetzt auf einen Reset-Button zu verzichten, da der Benutzer durch die Zurück-Taste des Browsers oder das Schließen des Tabs das Formular verlassen kann. Andererseits wird das Fehlen eines Reset-Buttons von Benutzern häufig beklagt.


Quellen[Bearbeiten]

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