Webdesign 11 - Formulare

11. Formulare

Mit HTML kann man Formulare erstellen, in denen der User Texte eingeben, Buttons klicken und aus Menüs auswählen kann. Es stehen euch eine Vielzahl von Formularelementen zur Verfügung: Text- und Passwortfelder, Radiobuttons, Checkboxen usw. Dazu kommen unsichtbare Elemente, die das Formular steuern und z.B. eine Bestätigungsseite anzeigen lassen.
Per Knopfdruck wird der Inhalt des Formulares dann an den Empfänger gesendet. Dies passiert für gewöhnlich über ein serverseitiges Script (z.B. CGI), dass euer Webhoster zur Verfügung stellt. Alternativ können die Formulardaten auch einfach per eMail-Programm gesendet werden.

Grundsätzlich steht jedes Formular zwischen folgenden Tags:

Code:

<form action="URL" method="Versandmethode"> 
  ... Formularelemente ...
</form>

Als URL des Action-Attributes wird meist die Adresse des Server-Scriptes angegeben. Die ist von Webhoster zu Webhoster unterschiedlich und muss entsprechend beim jeweiligen erfragt werden.
Alternativ kann man auch eine eMail-Adresse als Wert des Action-Attributes angeben. Diese wird dann wie in einem eMail-Hyperlink als „mailto:name@provider.de“ eingesetzt.
Letztere Vorgehensweise ist allerdings aus mehreren Gründen nicht zu empfehlen:
- klicken des „Senden“-Buttons öffnet letztentlich nur das eMail-Programm des Absenders (Outlook, Thunderbird o.ä.) und sendet die Formulardaten als eMail weg -> hat der Benutzer gar kein eMail-Programm installiert (z.B. in einem Internetcafé), kann er das Formular nicht absenden
- der Internet Explorer, auch in neueren Versionen, versteht das Action-Attribut falsch und öffnet einfach ein leeres eMail-Fenster – ohne Formulardaten
Habt ihr also keine Adresse des Server-Scriptes zur Verfügung (z.B. bei einigen Gratis-Hostern), nutzt besser einen der zahlreichen kostenlosen Forumlar-Anbieter wie Onlyfree.de oder OneTwoMax.de – damit fahrt ihr in dem Fall besser.

Das Attribut Method bezeichnet die Versandmethode, mit der die Daten übertragen werden sollen. Als Werte stehen euch „get“ und „post“ zur Verfügung.
Post ist der zu empfehlende Wert – er versendet die Daten separat und wird bei jedem Formular, das mit einem serverseitigen Script arbeitet angegeben. Außerdem wird „Post“ auch als passende Methode für den eMail-Versand benutzt.
Get sollte eher bei Suchmasken (z.B. wie in Google) verwendet werden. Es hat da den Vorteil, dass der Benutzer seine Suchanfrage direkt bei den Favoriten abspeichern kann, da „Get“ die Formulardaten an die Action-URL anfügt. Für Kontaktformulare ist „Get“ nicht geeignet.

Zwischen <form> und </form> können nun unterschiedliche Formularelemente definiert werden. Beispiele dafür habe ich bereits oben genannt.
Die meisten Formularelemente werden mit den <input>-Tag erzeugt. Das Attribut „type“ kennt viele verschiedene Werte, die dann entsprechend einen Radiobutton, Textfeld o.ä. erzeugen
Hier mal der Grundaufbau eines input-Tags:

Code:

<input type="Elementtyp" name="Elementname" value="Wert">

Type definiert die Art des Formularelementes (z.B. „radio“ -> Radiobutton oder „submit“ -> Senden-Button). Name und Value bilden ein Paar, dass als Name=Value mit den Formulardaten versendet wird. Außerdem haben einige Elementtypen Spezialattribute, dazu aber später mehr.

Euch stehen viele verschiedene input-Tags zur Verfügung (hier die wichtigsten):

Textfeld:

Code:

<input type="text" name="..." size="..." maxlength="...">

Hier kann ein Text eingegeben werden (z.B. ein Name, URL, eMail-Adresse). Bei Bedarf kann mit „size“ die Feldbreite in Zeichen und mit „maxlength“ die maximale Eingabelänge festgelegt werden. Wollt ihr dies nicht vorschreiben, lasst die entsprechenden Attribute einfach weg. Ebenfalls optional ist hier der Parameter „value“ – er würde dafür sorgen, dass in dem Textfeld bereits ein voreingetragener Text steht

Radiobutton:

Code:

<input type="radio" name="..." value="...">

Radiobuttons ermöglichen dem Nutzer die Auswahl einer Option aus mehreren Alternativen (Single-Choice). „Name“ benennt die Gruppe, zu der ein Radiobutton gehört (bei mehreren Buttons, die zur gleichen Gruppe gehören muss „name“ also gleich sein) und „value“ ist der Inhalt des Buttons. Der Text, mit dem der Button beschriftet werden soll, wird als einfacher HTML-Text vor oder hinter den Button gesetzt. Der zusätzliche Parameter checked="true" bewirkt, dass der Button bereits ausgewählt ist, wenn das Formular aufgerufen wird.

Checkbox:

Code:

<input type="checkbox" name="..." value="...">

Mit Checkboxen gibt man dem Benutzer die Möglichkeit, mehrere Optionen an- und/oder abzuwählen.
„Name“ benennt wieder die Gruppe, „value“ den Inhalt der Checkbox. Auch hier gibt es den zusätzlichen Parameter checked="true".

Passwortfeld:

Code:

<input type="password" name="..." size="..." maxlength="...">

Das Passwortfeld funktioniert genau wie das Textfeld. Allerdings werden die getippten Zeichen verschlüsselt als Sternchen (***) angezeigt.

Senden-Button:

Code:

<input type="submit" value="...">

Eines der wichtigsten Input-Tags, da mit diesem Button der Formularinhalt an das angegebene Script bzw. an die angegebene eMail-Adresse gesendet wird. Der Text, der in „value“ definiert wird, erscheint auf dem Button als Beschriftung.

Reset-Button:

Code:

<input type="reset" value="...">

Dieser Button setzt alle Formulardaten zurück. „Value“ definiert wieder die Beschriftung des Buttons.
Ich persönlich genieße diesen Button mit Vorsicht, da einige Benutzer ihn versehendlich klicken (statt „senden“) – das kann jedem mal passieren. Doch leider sind dann alle Formulareingaben gelöscht und man muss von vorn anfangen.

Unsichtbare Felder:

Code:

<input type="hidden" name="..." value="...">

Dies sind keine Eingabefelder, die vom Benutzer ausgefüllt werden können, sie werden auch nicht vom Browser angezeigt. Es sind eher festgelegte Angaben, die zusammen mit den eingegebenen Formulardaten an den Empfänger gesendet werden. Sinnvoll ist das zum Beispiel für die Übersichtlichkeit bei mehreren Formularen auf einer Site: man kann dem Formular einen Namen geben, der mit dem Senden übertragen wird. Außerdem können Weiterleitungen zu HTML-Seiten eingerichtet werden, die nach erfolgreichem senden des Formulars angezeigt werden usw.

Neben den input-Tags gibt es noch 2 weitere wichtige Formularelemente:

Auswahlmenüs bieten die Möglichkeit aus einer Liste eine oder mehrere Optionen auszuwählen. Grundsätzlich sind sie wie folgt aufgebaut:

Code:

<select name="..." size="...">
  <option value="..."> 1. Option </option>
  <option value="..."> 2. Option </option>
</select>

„Name“ ist wie immer der Name des Formularabschnittes, mit „size“ wird die Anzahl der sichtbaren Zeilen angegeben (ist diese geringer als die Anzahl der Optionen, erscheint ein Scrollbalken). Wird „size“ auf 1 gesetzt, entsteht ein PullDown-Menü (Sonderfall). Das zusätzliche Attribut multiple="true" (bei select) ermöglicht eine Mehrfachauswahl mit [Strg] – das sollte dem Benutzer mitgeteilt werden.
Das <option>-Tag beinhaltet das Attribut „value“, welches wie immer den zu sendenden Wert beinhaltet. Innerhalb des <option>-Containers steht dann die ausformulierte Option, welche der Besucher auswählen kann. Natürlich kann man beliebig viele Optionen angeben. Zusätzlich existiert hier der Parameter „selected“ (ohne Wert), welcher dafür sorgt, dass die entsprechende Option vorausgewählt ist.

Mehrzeilige Textbereiche (Eingabefelder) sind für Nachrichtenfelder geeignet. Sie entstehen über das folgende Tag:

Code:

<textarea name="..." rows="..." cols="..."></textarea>

„Rows“ definiert die Höhe in Zeilen, „cols“ die Breite in Zeichen. Schreibt ihr zwischen dem öffnenden und schließendem Tag Text, erscheint dieser als vorgefertigter Text im Eingabefeld.

Ich habe hier mal ein beispielhaftes Formular erstellt, bei dem ich einige der oben beschriebenen Tags verwende:


Allgemein hat es sich „eingebürgert“, dass Formulare in Tabellen geschrieben werden. So wird das ganze gleich sehr viel übersichtlicher:




~~~
Ein ganz großes Sorry an alle Teilnehmer, die auf diesen Tail des Kurses etwas warten mussten! Als Entschädigung kommt dafür das nächste Kapitel gleich diesen Sonntag, um wieder in den alten Rhythmus zu kommen ;-)

Am Wochenende darauf stelle ich euch einen Abschlusstest zur Verfügung, bei dem ihr euer erlangtes Wissen testen lassen könnt. Dann geht es weiter mit dem nächsten großen Themenabschnitt: CSS!

Um eure erworbenen Kenntnisse zu "testen" und zu
festigen, könnt ihr die folgende Aufgabe lösen. Die fertige Datei könnt
ihr mir dann per eMail (webmaster@otaku-welt.de) zuschicken - ich werfe
einen Blick darauf und gebe euch ein Feedback.


Aufgabe zu diesem Kurs:

Erstelle ein Formular mit folgenden Elementen:
- 2x Eingabefeld (Name + eMail-Adresse)
- 5 Radiobuttons, die einer Gruppe angehören
- 2 Checkboxen unterschiedlicher Gruppen
- Nachrichtenfeld
- Senden- & Löschen-Button

Wer das Tabellen-Kapitel wiederholen möchte, kann da Formular in einer Tabelle anordnen.