Formulare einbinden
Wer über seine Webseite mit dem Surfer in Kontakt treten will, kann dies neben einer E-Mail nur über Formulare tun. Ob man nun einen Online-Shop betreibt oder dem Leser die Möglichkeit geben will, eine Datenbank zu durchsuchen, ohne Formulare wäre das alles nicht möglich. Ein Formular ist ein Block mit mehr oder weniger Eingabefeldern zur Übermittlung von Daten an den Server. Neben Auswahlfeldern und Eingabefeldern stehen Radiobuttons, Checkboxen und der Submit-Button zum Absenden zur Verfügung. Ein Formular kann an beliebiger Stelle im HTML-Code mit „<form..></form>“ definiert werden.
Formulardefinition
Bei der Definition eines Formulars werden die Art der Übermittlung (method), der Empfänger (action) und gegebenenfalls die Datencodierung (enctype) sowie ein Name, über den das Formular per Javascript angesprochen werden kann, festgelegt.
„get“ oder „post“?
Bei „method“ wird zwischen „get“ und „post“ unterschieden. Die Methode „get“ empfiehlt sich nur, wenn lediglich ein oder zwei Parameter übergeben werden müssen. Diese werden dann bei der Übertragung an die URL mit angehängt. Auf der sicheren Seite ist man mit „post“, denn damit ist die Zahl der Parameter nicht begrenzt.
Mail oder Datei?
Das Attribut „action“ kann eine URL enthalten, wenn die Formulardaten von einer Datei verarbeitet werden oder aber eine E-Mail Adresse, der „mailto:“ vorangestellt wird. In diesem Fall werden die Daten an die angegebene E-Mail Adresse gesandt. Der Erfolg der Übertragung ist jedoch unsicher, da sie unter anderem von den Browsereinstellungen des Nutzers abhängig ist. Wählt man sie dennoch, sollte man mit als Methode immer „post“ wählen und mit „enctype=’text/plain’“ die Daten formatieren lassen.
Zielfenster
Die Rückmeldung, nachdem das Formular abgeschickt wurde, kann im selben oder aber in einem neuen Fenster erfolgen. Das wird mit dem Attribut „target“ festgelegt.
Absendebutton
Für die Dateneingabe stehen dem Programmierer verschiedene Formularfeld-Typen zur Verfügung. Vor dem abschließenden „</form>“ steht dann üblicherweise ein Klickbutton, der durch Klick den Datentransfer initiiert. Ein Klickbutton zum Absenden hat das Attribut type=“submit“ und einen Wert, value=“Absenden“, mit dem die Beschriftung des Buttons definiert wird. Die Höhe des Buttons ist standardisiert und die Länge richtet sich nach der Länge der Beschriftung. Mit Cascading Style Sheets kann man jedoch das Aussehen eines Klickbuttons verändern. Darüber hinaus kann ein Absendebutton einen individuellen Namen, name=“individuell“, haben, der als Variable mit übertragen wird. So ist es möglich, ein Formular mit mehreren Buttons zu versehen. Auf dem Server können die Daten dann eine jeweils andere Routine durchlaufen, je nachdem, welcher Button geklickt wurde.
Resetbutton
Über type=“reset“ kann man einen Reset-Button definieren, der bei Klick alle Werte wieder in den Ursprungszustand zurücksetzt.
<form method=“post“ action=“verarbeitende_datei.htm“>
<p><input type=“submit“ name=“routine_1″ value=“absenden“></p>
<p><input type=“reset“ value=“zurücksetzen“></p>
</form>
Grafische Buttons
Neben den Standardbuttons in HTML lassen sich auch individuelle Grafiken als Button definieren. Dazu wird der Typ auf type=“image“ geändert und statt eines Wertes (value) wird die Quelle (Source) der Grafik notiert – src=“individuelle_grafik.gif“.
<form method=“post“ action=“verarbeitende_datei.htm“>
<p><input type=“image“ src=“individuelle_grafik.gif“></p>
</form>
„onClick“ und „onSubmit“
Sowohl ein Klickbutton als auch ein Formular an sich können über die Eventhandler „onClick“ und „onSubmit“ ein Javascript aufrufen. Formulareingaben lassen sich so vor dem Abschicken per Javascript auf Vollständigkeit überprüfen.