HTML verstehen Teil 9: Das Formular I

Das HTML-Formular

Der Vollständigkeit halber soll es in diesem Artikel um das HTML-Formular gehen. Im reinen HTML können Sie Formulare zwar gut einsetzen, haben aber ziemlich wenig davon: Denn das Anzeigen und Ausfüllen eines Formulars ist nur die halbe Miete für das, was Sie mit einem Formular eigentlich wollen. Die Daten, die Ihr Kunde, Ihr Blogleser, eingibt, sind die eine Sache. Hier können Sie sich ziemlich mit schönen Layouts austoben. Der eigentliche Grund für den Einsatz eines Formulars ist, dass Sie Daten von Ihrem Kunden wollen, und Sie diese irgendwo, irgendwie speichern wollen. Das kann HTML nicht!

Mit HTML können Sie die eine Sache betreiben, nicht aber die Andere. Denn die eingegebenen Daten werden von einem Formular an den Server übertragen, doch was macht dieser mit den Daten? In HTML haben Sie hier leider keine Möglichkeit, die Daten zu verarbeiten. Dazu benötigen Sie eine Programmierung auf der Serverseite, die Sie in Java, CGI, PHP etc. bewerkstelligen müssen.

Hier im Blog geht es aber um HTML und somit nur um die eine Seite der Medaille! Ich zeige Ihnen die Grundstruktur eines Formulars, nicht jedoch die Verarbeitung, da dies z.B. Thema eines PHP-Kurses wäre! 🙂

Sinn des Formulars

Sie als Internetmarketer wollen ja nicht nur in Ihrem Blog guten Content anbieten, Sie wollen ja auch eine „Liste“ aufbauen, denn in dieser liegt der Sinn Ihres Tuns! Somit wollen Sie bspw. ein OptIn-Formular auf Ihrer Seite realisieren, bei dem der Kunde sich einträgt, seine Email bestätigt und in Ihre Liste eingetragen wird.

Da das Formular 2 Seiten hat, und Sie sich die Hintergrundverarbeitung auf dem Server kaufen oder auch schenken lassen können (siehe gratisseller), sollen Sie hier die 1. Seite des Formulars kennenlernen. Das ist mit oder ohne Einsatz von CSS schon umfänglich genug.

Formularaufbau

Ein Formular installieren Sie auf Ihrer Seite mit den Tags <form> </form>. Dieses Tag leitet und beendet das Formular. Für die einzelnen Elemente eines Formulars gibt es nun eine Vielzahl von weiteren Tags, mit denen Sie die Eingabe gestalten können. Da ein Formular meist eine untereinander oder nebeneinander Schaltung von Formularelementen ist, ergibt sich meist auch noch der Einsatz der Tabelle, um ein Formular zu gestalten. Natürlich können Sie hierzu auch die Unterstützung von CSS in Anspruch nehmen und Ihr Formular noch moderner gestalten.

Damit können Sie einen Grundaufbau eines Formulars global so schreiben:

<form …….>
 <table …….>
  <tr>
   <td>Feldname</td>
   <td>Formularelement</td>
  </tr>
  <tr>
   <td>Feldname</td>
   <td>Formularelement</td>
  </tr>
  <tr>
   <td colspan=“2″>Eingabebutton</td>
  </tr>
 </table …….>
</form …….>

Formularelemente

Welche Formularelemente gibt es? Sie werden überrascht sein: Es gibt fast alle Eingabeelemente, die Sie bspw. auch aus anderen Windowsprogrammen gewohnt sind.

  • Feldeingabe: Eine „Objektanzeige“ eines Eingabefeldes einer bestimmten Länge
  • Texteingabe: Eine „Objektanzeige“ eines mehrzeiligen Textfeldes
  • Listenfelder: Eine „Objektanzeige“ eines Listenfeldes
  • Optionsfelder: Eine „Objektanzeige“ von Auswahlfelder für die eindeutige Auswahl (sog. Radiobuttons)
  • Selektionsfelder: Eine „Objektanzeige“ von Auswahlfelder für die mehrfache (sog. Select-Buttons)
  • versteckte Felder: Eine Mitgabe von Feldern, die auf dem Bildschirm nicht eingegeben oder angezeigt werden (hidden-fields)
  • Buttons: Eine „Objektanzeige“ eines Feldes, das bei Klick darauf das Formular absendet (Buttons)

Formularverarbeitung

Nehmen Sie an, sie haben obiges Grundcoding eines Formulars auf Ihrer Seite eingebaut, wie ist nun die Verarbeitung des Formulars?
Im <form>-Tag geben Sie als Attribute zum Beispiel ein Attribut action mit. Dies ist eigentlich nichts anderes als ein Link auf eine Seite (besser eine URL) an die das Formular verzweigt, wenn Sie den Absendebutton drücken. Das Erscheinungsbild ist nun derart, dass das Formular auf Ihrem Bildschirm stehen bleibt. Der Browser aber einen Aufruf dessen durchführt, was im Attribut action steht, durchführt.

Solange Sie in dem gerufenen Programm keine Ausgabe machen, bleibt das Formular auf Ihrem Bildschirm bestehen. Denn die Verarbeitung aller im Formular eingegebenen Daten wird an den Server übertragen und dort „dunkel“ verarbeitet. Erst wenn das gerufene Programm beendet ist, erhält der Browser wieder die Kontrolle und gibt die Daten aus, die sie für diesen Zweck programmiert haben.

Hört sich kompliziert an, ist es aber gar nicht so arg. Nehmen Sie an sie haben ein Formular mit dem Action-Attribut
action=“http://mydomain.de/form1.php“
und ein php-Programm mit dem Namen form1.php, das die Verarbeitung der Formulareingabe auf dem Server übernimmt.
Dann haben wir folgenden Ablauf:

formular_schema

Der Browser ruft bei betätigen des Übertragungsbuttons das Programm in der <form action=“….“ …> auf und führt das dortige Coding durch. Danach verzweigt das Programm auf eine neue Seite und es geht weiter!

Sie selbst sehen auf dem Browser davon nichts! Der Browser bleibt einfach stehen. Weder in der URL noch in den Statusleisten sehen Sie den Aufruf. Nur im Quellcode bei dem form-Tag können Sie ermitteln wohin das Programm verzweigt. Was dort passiert, läuft auf dem Server und für Sie als Leser unsichtbar. Das ist das Wesen eines Formulars.

Nun ist das Senden des Formulars natürlich eine Datenübertragung über Ihren Rechner, über DSL ins Netz und auf Ihren Server. Das kann dauern. Deshalb gibt es die Möglichkeit via einer anderen Programmiersprache, die in Ihrem Browser läuft das Formular zunächst zu prüfen, ob alle Eingaben richtig gemacht wurden. Diese sog. „Clientseitige Prüfung“ können Sie z.B. an den Übertragungsbutton anschließen. Die „Clientseitige Prüfung“ wird z.B. in Javascript programmiert und übergibt das Formular erst dann an den Server, wenn es die Programmierung erfolgreich durchlaufen hat.

Somit spart man sich die dauernde Übertragung des Formulars bei Fehlern. Denken Sie z.B. an die Pflichtfelder eines Formulars! Sie wollen das Formular nur dann auf dem Server verarbeiten, wenn Name, Vorname, Telefonnummer eingegeben sind.

Dabei ist Javascript so mächtig, dass Sie auch prüfen können, ob eine „richtige“ – meint syntaktisch richtige – Emailadresse übergeben wurde. Das Javascript-Programm hat dabei zwei Ausgänge: richtig oder falsch! Wenn Fehler entdeckt werden, wird das Formular nicht an den Server übertragen und visa versa!
Javascript hat aber den Nachteil, dass jeder das Programm sehen kann, denn es liegt auf Ihrem Rechner! Sie können also sehen, was da geprüft wird.

Deshalb kann man Javascript nicht benutzen, um bspw. eine Passwortprüfung durchzuführen, denn Sie könnten sich das Programm anschauen und würden herausfinden, was das richtige Passwort ist. Aber zur Überprüfung, ob ein Feld gefüllt ist, ob eine Telefonnummer aus den Zeichen 0..9 / – besteht, ja dafür können Sie Javascript gut benutzen und sparen sich die Zeit, der andauernden Übertragung auf den Server!

Im weiteren Verlauf dieser Artikelserie, werde ich Ihnen noch ein kleines OptIn-Formular zeigen, das mit Javascript geprüft wird. Doch lassen Sie mich zunächst auf die einzelnen Formularelemente eingehen, die Sie anwenden können. „Sie werden begeistert sein“

Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar