HTML Basis

HTML: Formulare

Definition | Eingaben | Verarbeitung

Die normalen HTML-Dokumente dienen fast durchgängig dem einseitigen Informationstransport. Der Nutzer sitzt vor seinem PC und bewundert Texte und Grafiken, die von anderen erstellt wurden. Allenfalls das Anklicken von Verweisen bringt etwas Interaktion auf den Bildschirm. Eine direkte Kontaktaufnahme mit dem Webdesigner oder Herausgeber der Seite erfolgt zumeist über das Abschicken einer E-Mail.

HTML bietet jedoch noch eine weitere und vor allem sehr nützliche Möglichkeit der Kontaktaufnahme und des Datenaustausches: nämlich Formulare. Der Herausgeber einer Seite stellt ein leeres Formular ins Netz, das ein Anwender nach bestimmten Vorgaben ausfüllt und zum Server zurückschickt, damit es verarbeitet werden kann.

Natürlich könnten solche Informationen auch mit E-Mails weitergegeben werden. Aber der Arbeitsaufwand für Anwender und Informationsverarbeiter wäre doch ungleich höher.

Definition eines Formulars

Ein Formular wird mit <FORM> geöffnet und mit </FORM> wieder geschlossen. Dazwischen stehen dann die weiteren Anweisungen. Dies kann zum Austesten auf dem PC auch erst einmal genau so eingegeben werden. Um das Formular aber wirklich online nutzen zu können, muß später eine Adresse (wohin soll das Formular zurückgeschickt werden?) und eine Methode (wie wird es an den Server zurückgeschickt?) hinzugefügt werden. Im folgenden Beispiel wird das Formular an den Server geschickt, um dort mit einem CGI-Programm verarbeitet zu werden:

<FORM ACTION="urladresse" METHOD="POST">
Hier können weitere Formularelemente stehen (siehe unten) und auch ganz normale HTML-Befehle dürfen eingebaut werden.
</FORM>

Entscheidend bei der Verarbeitung von Usereingaben in Formularen sind die Möglichkeiten, die Ihnen auf dem Server geboten werden. Häufig sind das schon vorgefertigte Formulare, wie z.B. ein Feedback-Formular, welches Ihnen Ihr Webhoster zur Verfügung stellt. Dieses können Sie entweder online Schritt für Schritt konfigurieren oder auch offline nach den Vorgaben des Webhosters erstellen. Wenn Ihr Webhoster dieses nicht oder nur eingeschränkt anbietet, können Sie auf externe Dienstleister im Internet zurückgreifen. Dann läuft die Verarbeitung der Daten eben nicht auf dem Server Ihrer Homepage, sondern auf dem Server des Dienstleisters. Eventuell ist Werbung in Kauf zu nehmen. Nach dem Abschicken des Formulars durch den User werden die Angaben z.B. an die Adresse http://kundenserver.webhoster.de/cgi-bin/feedback/feedback.cgi geschickt, dort verarbeitet und von dort aus beantwortet.

Einzeilige Eingabefelder

"Normale" Eingabe mit unterschiedlicher Längenangabe (hier: 15 und 25) für eine Zeile. Sie dürfen übrigens die Probe machen und selbst reinschreiben:

Die Angabe hinter NAME darf keine deutschen Umlaute und auch keine anderen Sonderzeichen enthalten. Der NAME ist für die Formularverarbeitung wichtig und sollte daher nur einmal pro Formular verwendet werden.

SIZE legt die Anzahl der Zeichen fest, die angezeigt werden. MAXLENGTH ist für die Anzahl der Zeichen von Belang, die maximal eingegeben werden können. Meistens sind die Größenangaben für SIZE und MAXLENGTH identisch. Ist der Wert für MAXLENGTH größer, wird bei längeren Eingaben automatisch seitwärts gescrollt.

Mit VALUE kann ein Vorgabewert oder -text eingetragen werden.

Mit der zusätzlichen Angabe von TYPE können verschiedene Typen von Eingabefeldern definiert werden.

Mit <INPUT TYPE=PASSWORD NAME="feldname" SIZE=n MAXLENGTH=n> werden Paßwort-Eingaben realisiert.

Eingabe mit Paßwort: Bei der Eingabe werden **** angezeigt.

Ein weiterer Typ ist FILE, mit dem Sie auch eine Datei verschicken können: <INPUT TYPE=FILE NAME="feldname" SIZE=n>

Ein (Doppel)Klick auf den Button ruft das Dateiverzeichnis Ihres PCs auf. Keine Angst, hier wird nichts verschickt.

Das Attribut READONLY verhindert das Hineinklicken und -schreiben:

Für den darzustellenden Text hinter VALUE sollte für SIZE ein ausreichend großer Wert vergeben werden.

Mehrzeilige Eingabefelder

<TEXTAREA NAME="feldname" ROWS=n COLS=n>
Mein Kommentar:
</TEXTAREA>

Eingabe mit vorbelegtem Text: Mein Kommentar:

Zwischen Einleitungs- und Ende-Tag kann ein Text notiert werden, der das Eingabefeld vorbelegen soll. ROWS gibt die Anzahl der Reihen für das Textfeld an. COLS steht für die Anzahl der Spalten.

Auswahlliste

<SELECT NAME="listenname">
<OPTION>Auswahl 1</OPTION>
<OPTION>Auswahl 2</OPTION>
<OPTION>Auswahl 3</OPTION>
</SELECT>

Ein Klick auf den Pfeil klappt ein Menü herunter, in welchem ein Eintrag aus der Liste markiert und damit ausgewählt werden kann. Dieser wird dann zum Server zur Weiterverarbeitung zurückgeschickt.

Wenn in der SELECT-Anweisung das Attribut SIZE= entsprechend der Anzahl der Optionen (hier 3) notiert wird, dann wird keine Drop-Down-Liste angeboten, sondern eine vollständig sichtbare Liste, in der ausgewählt werden kann:

In diesem Fall wurde bei Option 3 das Attribut SELECTED hinzugefügt. Dadurch ist diese Option vorselektiert.

Radiobuttons

<INPUT TYPE=RADIO NAME="feldname" VALUE="name1">Button 1
<INPUT TYPE=RADIO NAME="feldname" VALUE="name2">Button 2
<INPUT TYPE=RADIO NAME="feldname" VALUE="name3">Button 3

Button 1 Button 2 Button 3

Optionsfelder (Radiobuttons) bestehen aus einer Gruppe von beschrifteten Schaltflächen, von denen immer nur eine selektiert werden kann. Alle anderen werden automatisch ausgeschaltet.

Durch Hinzufügen des Attributs CHECKED kann ein Button vorselektiert werden (hier bei Button 1):
Button 1 Button 2 Button 3

Checkbuttons

<INPUT TYPE=CHECKBOX NAME="feldname" VALUE="name1">Button 1
<INPUT TYPE=CHECKBOX NAME="feldname" VALUE="name2">Button 2
<INPUT TYPE=CHECKBOX NAME="feldname" VALUE="name3">Button 3

Button 1 Button 2 Button 3

Kontrollkästchen (Checkbuttons) bestehen aus einer Gruppe von beschrifteten Schaltflächen. Davon kann eine angeklickt oder es können auch mehrere ausgewählt werden.

Durch Hinzufügen des Attributs CHECKED kann ein Button vorselektiert werden (hier bei Button 2). Ein Klick auf das Kästchen entfernt das Häkchen wieder.
Button 1 Button 2 Button 3

Versteckte Elemente

Es können durch TYPE=HIDDEN versteckte Felder festgelegt werden, die der Anwender nicht zu Gesicht bekommt. Die Daten von versteckten Feldern werden beim Abschicken mit übertragen und können dann auf dem Server verarbeitet werden. So könnte z.B. mit VALUE="..." eine E-Mail-Adresse notiert sein, an die das Formular geschickt wird oder eine URL, mit der eine (Bestätigungs-)Seite aufgerufen wird.

Befehls-Schaltflächen

Die Angabe hinter VALUE legt die Beschriftung fest. Beim Drücken der Schaltfläche und einer bestehenden Internetverbindung wird das Formular mit allen getätigten Eingaben zum Server geschickt. Wenn Sie das hier probieren, werden Ihre Eingaben gelöscht und diese Seite noch einmal aufgerufen. Für eine korrekte Weiterleitung und -verarbeitung wäre die im Eingangsbefehl von FORM genannte URL-Adresse (s.o.) zuständig.

Die Angabe hinter VALUE legt die Beschriftung fest. Beim Drücken der Schaltfläche werden die Eingaben des Formulars gelöscht.

http://www.htmlbasis.de Impressum