Formulare

Während bei allen bisher erstellten HTML-Dokumenten der Informationsfluss nur in einer Richtung stattfand, nämlich vom Server zum Browser des Anwenders, erhält der Informationsanbieter mittels eines Formulars die Möglichkeit der Rückmeldung durch den Anwender.
Dabei kann der Anwender Eingabefelder ausfüllen, in mehrzeiligen Textfeldern Text eingeben, aus Listen Einträge auswählen usw.

Wenn das Formular fertig ausgefüllt ist, kann der Anwender auf einen Button klicken, um das Formular abzusenden.
Dazu gibt man beim Erstellen eines Formulars an, was mit den Daten des ausgefüllten Formulars passieren soll.
Man kann die ausgefüllten Daten beispielsweise an eine PHP-Datei auf einem Server schicken lassen oder von einem CGI-Programm auf dem Server-Rechner weiterverarbeiten lassen.

Formulare können sehr unterschiedliche Aufgaben haben. So werden sie zum Beispiel eingesetzt:

• um bestimmte, gleichartig strukturierte Auskünfte von Anwendern einzuholen,
• um Anwendern das Suchen in Datenbeständen zu ermöglichen,
• um Anwendern die Möglichkeit zu geben, selbst Daten für einen Datenbestand beizusteuern,
• um dem Anwender die Möglichkeit individueller Interaktion zu bieten, etwa um aus einer Produktpalette etwas Bestimmtes zu bestellen.

Man kann an jefer beliebigen Stelle innerhalb des Dateikörpers einer HTML-Datei einen Formularbereich definieren.

Beispiel 1:

  <form action="mailto:mustermann@mailserver.de" method="post">
  <!-- hier folgen die Formularelemente -->
  </form>

Beispiel 2:

  <form action="http://www.mustermann.de/cgi-bin/feedback.pl" method="get">
  <!-- hier folgen die Formularelemente -->
  </form>

Erläuterung:

Mit <form>...</form> definiert man ein Formular (form = Formular).
Alles, was zwischen dem einleitenden <form>-Tag und dem abschließenden Tag </form> steht, gehört zum Formular. Das sind hauptsächlich Elemente des Formulars wie Eingabefelder, Auswahllisten oder Buttons.
Um die Elemente zu platzieren und zu beschriften, kann man dazwischen aber auch andere HTML-Elemente notieren.

Im einleitenden <form>-Tag gibt man mit dem Pflichtattribut action an, was mit den Formulardaten passieren soll, wenn der Anwender das Formular absendet (action = Aktion).
Die Wertzuweisung an action kann eine E-Mail-Adresse mit vorangestelltem mailto: sein wie im Beispiel 1. Dann werden die ausgefüllten Formulardaten an diese E-Mail-Adresse geschickt.
Oder man ruft ein Programm (meistens ein CGI-Script) oder einen PHP-Script auf dem Server-Rechner auf, das die Daten weiterverarbeitet, so wie im Beispiel 2.
Man kann bei action auch eine HTML-Datei angeben. Diese wird beim Absenden des Formulars aufgerufen und kann die Formulardaten z.B. mit JavaScript weiterverarbeiten.
Berücksichtige dabei aber, dass JavaScript nur dann Zugriff auf Daten hat, wenn die Methode get verwendet wurde.

Ein weiteres Pflichtattribut im einleitenden <form>-Tag ist method, also die Methode, nach der die Daten versendet werden sollen. Also Werte kommen entweder post oder get in Frage. Der Nachteil von get ist, dass man in der URL-Zeile des Browsers die übertragenen Werte lesen kann.

Sie dienen zur Aufnahme von einem oder wenigen Wörtern oder einer Zahl.

  <form action="auswertung.html" method="get">
  <p>Vorname:<br>
  <input type="text" name="vorname" size="30" maxlength="30">
  </p>
  <p>Zuname:<br>
  <input type="text" name="zuname" size="30" maxlength="40">
  </p>
  </form>

Erläuterung:

<input type = "text"> definiert ein einzeiliges Eingabefeld (input = Eingabe). Die Angabe type = "text" ist Standard und kann daher auch weggelassen werden.

Jedes Eingabefeld sollte einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name. Der vergebene Name wird später benötigt, um auf die Daten des Eingabefeldes zugreifen zu können.

Ferner kann man bei einzeiligen Eingabefeldern die Anzeigelänge in Zeichen mit size sowie die interne Feldlänge in Zeichen maxlength bestimmen.
Wenn die interne Feldlänge maxlength größer ist als die angezeigte Feldlänge size, dann wird bei längeren Eingaben automatisch gescrollt.

Um Beschriftung und Eingabefelder ordentlich zu positionieren, empfiehlt sich übrigens der Einsatz einer "blinden" Tabelle (border="0").

Für die Eingabe von Geheimnummern, Passwörtern usw. gibt es einen speziellen Typ von Eingabefeld. Die eingegebenen Zeichen werden dabei durch Platzhalter (meistens Punkte oder Sternchen) dargestellt, so dass Personen im Raum des Anwenders nicht zufällig das eingegebene Passwort mitlesen können.

  <form action="login.php" method="post">
  <p>Kennwort:<br>
  <input name="kennwort" type="password" size="12" maxlength="12">
  </p>
  </form>

Erläuterung:

Eingabefelder für Passwörter werden mit type="password" im <input>-Tag definiert.

Sie dienen zur Aufnahme von Kommentaren, Nachrichten usw., also längeren Texten.

  <form action="html_elemente.php" method="post">
  <p>Welche HTML-Elemente fallen Ihnen ein, und was bewirken sie:<br>
  <textarea name="user_eingabe" cols="50" rows="10"></textarea>
  </p>
  </form>

Erläuterung:

<textarea> leitet ein mehrzeiliges Eingabefeld ein (textarea = Textbereich).
Jedes mehrzeilige Eingabefeld sollte ebenso wie ein einzeiliges Eingabefeld einen internen Bezeichnernamen erhalten und zwar mit der Angabe name.

Pflicht ist die Angabe zur Höhe und Breite des Eingabebereichs:
Das Attribut rows bestimmt die Anzahl der angezeigten Zeilen (rows = Zeilen) und damit die Höhe,
während cols die Anzahl der angezeigten Spalten (cols = columns = Spalten) festlegt. "Spalten" bedeutet dabei die Anzahl Zeichen (pro Zeile).

Mit </textarea> schließt man das mehrzeilige Eingabefeld ab. Der End-Tag ist nötig und darf nicht weggelassen werden.

Textvorbelegung bei mehrzeiligen Eingabebereichen:
Um mehrzeilige Eingabefelder mit Text vorzubelegen, notiert man den gewünschten Text einfach zwischen dem einleitenden <textarea>-Tag und dem abschließenden </textarea>.

Eingabefelder und Eingabebereiche auf "nur lesen" setzen:
Mit dem Attribut readonly kann man ein einzeiliges Eingabefeld oder einen mehrzeiligen Eingabereich auf "nur lesen" setzen.

Man kann dem Anwender eine Liste mit festen Einträgen anbieten, aus der er einen Eintrag auswählen kann.
Der Wert (value) des ausgewählten Eintrags wird übertragen, wenn der Anwender das Formular abschickt.

  <form action="zahlung.php" method="post">
  <select name="Zahlweise">
  <option value="ec">EC-Karte</option>
  <option value="amex">AMEX</option>
  <option value="diners">Diners</option>
  <option value="master">MasterCard</option>
  <option value="visa">VISA</option>
  </select>
  </form>

Erläuterung:

<select ...> leitet man eine Auswahlliste ein. Jede Auswahlliste sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name.

Mit dem Attribut size bestimmt man die Anzeigegröße der Liste, d.h. wie viele Einträge angezeigt werden sollen. Standard ist size="1".

Mit <option>...</option> definiert man zwischen dem einleitenden <select>-Tag und dem Abschluss-Tag </select> jeweils einen Eintrag der Auswahlliste.
Zwischen <option> und </option> muss der Anzeigetext des Listeneintrags stehen.
Um einen Eintrag der Auswahlliste vorzuselektieren, gibt man im einleitenden <option>-Tag des betreffenden Eintrags das Attribut selected an.

Das Atribut value im <option>-Tag speichert den Wert des jeweiligen Listeneintrags. Dieser Wert wird beim Absenden des Formulars dem Namen des select-Bereiches zugeordnet - also im Beispiel: Zahlweise = "visa", falls der Nutzer den Listeneintrag VISA ausgewählt hat.

Radiobuttons sind eine Gruppe von runden Knöpfen, von denen der Anwender nur einen auswählen kann.
Der Wert (value) des ausgewählten Radiobuttons wird beim Absenden des Formulars übertragen.

  <form action="zahlung.js" method="get">
  <input type="radio" name="Zahlmethode" value="ec"> EC-Karte<br>
  <input type="radio" name="Zahlmethode" value="amex"> AMEX<br>
  <input type="radio" name="Zahlmethode" value="diners"> Diners<br>
  <input type="radio" name="Zahlmethode" value="master"> MasterCard<br>
  <input type="radio" name="Zahlmethode" value="visa"> VISA
  </form>

Erläuterung:

Radiobuttons werden durch <input type="radio"> definiert (input = Eingabe).
Jeder Radiobutton sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name.
Alle Radiobuttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen markieren.
Der vergebene Name wird benötigt, um auf den Wert (value) des Button zugreifen zu können.

Vor oder hinter dem <input>-Tag kann man den Text notieren, der als Beschriftung des jeweiligen Radiobutton erscheinen soll.

Wenn man eine der Auswahlmöglichkeiten vorselektieren wollen, dann notiert man im <input>-Tag des entsprechenden Radiobuttons das standalone Attribut checked,

also z.B.: <input type="radio" name="Typ" value="Kassenpatient" checked>

Checkboxen sind eine Gruppe von ankreuzbaren Quadraten, bei denen der Anwender kein, eins oder mehrere auswählen kann.
Die Werte (value) aller ausgewählten Checkboxen werden beim Absenden des Formulars übertragen.

  <form action="bestellung.php" method="post">
  <input type="checkbox" name="zutat" value="salami"> Salami<br>
  <input type="checkbox" name="zutat" value="pilze"> Pilze<br>
  <input type="checkbox" name="zutat" value="sardellen"> Sardellen
  </form>

Erläuterung:

Checkboxen werden durch <input type="checkbox"> definiert (input = Eingabe).
Jede Checkbox muss einen internen Bezeichner erhalten, und zwar mit der Angabe name.
Alle Checkboxen, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Elementen kann der Anwender keines, eines oder mehrere ankreuzen.

Mit dem Attribut value bestimmt man den Wert für jede Checkbox (value = Wert).
Wenn der Anwender das Formular abschickt, werden alle Werte der ausgewählten Buttons übertragen.

Vor oder hinter dem <input>-Tag kann man den Text notieren, der als Beschriftung des jeweiligen Buttons erscheinen soll.

Wenn man Auswahlmöglichkeiten vorselektieren will, dann notiert man im <input>-Tag der entsprechenden Checkbox das alleinstehende Attribut checked,

also z.B.: <input type="checkbox" name="Kenntnisse_in" value="HTML" checked>

Der wichtigste Button (am Ende des Formulars) ist der Absende-Button, denn mit ihm kann der Anwender das ausgefüllte Formular zum Server an die im einleitenden <form>-Tag unter action notierte Datei schicken.

Er wird erstellt durch: <input type = "submit" value = "Bezeichnung_des_Buttons">

Mit dem Abbrechen-Button kann der Anwender alle Eingaben verwerfen. Das Formular wird nicht abgeschickt und alle Eingaben werden gelöscht.

Er wird erstellt durch: <input type = "reset" value = "Bezeichnung_des_Buttons">

<form action="daten.php" method="post">
   Name: <input name="Name">
   Kommentar:<br>
   <textarea name="Kommentar" rows="10" cols="50"></textarea>
   <input type="submit" value=" Absenden "> <input type="reset" value=" Abbrechen">
</form>

Sinnvoll sind solche Buttons in Verbindung mit Scriptsprachen wie JavaScript.
In der Regel werden sie dazu verwendet, Verweise oder andere JavaScript-gesteuerte Aktionen auszuführen wie Fenster öffnen oder schließen oder ein Programm starten.

Beispiele:

1. <input type="button" value="Fenster schließen" onClick="window.close()">
2. <input type="button" value="zurück" onClick="history.back()">

Hinweis:

Wie man sieht, muss der Klickbutton nicht innerhalb eines Formulares stehen, denn durch ihn werden ja auch keine Daten erfasst bzw. ausgewählt.