schwider.de Web-Technik, Beratung, Support

Interaktive WebSeiten müssen immer eine Möglichkeit zur Dateneingabe bieten. Dafür gibt es in HTML das Konzept der Formulare. Hier ein kleines Beispiel:

Grundgerüst

HTML-Formulare haben folgenden grundlegenden Aufbau:

<form action="process.cgi" method="post">
  ...Formular-Elemente (s.u.)...
</form>

Unter action wird die URL (Internet-Adresse) eines Programms eingetragen, oft ein sogenanntes CGI-Skript. Fehlt dieses Attribut, so werden die Formulardaten an die Ursprungs-URL zurückgeschickt.

TextBox

Einzeilige Eingabefelder, wie z.B.

<input type="text" size="30" maxlength="50" name="txtKurz"
 value="Hier kann Text eingegeben werden">

Mit size wird bestimmt, wie Breit (in Anzahl Zeichen) die TextBox auf dem Bildschirm erscheint. maxlength dient zur optionalen Festlegung der maximalen Eingabelänge. Mit value kann optional ein Text vorbelegt werden.

PasswordBox

Eingabefelder für Paßwörter funktionieren ähnlich wie TextBoxen, jedoch werden auf dem Bildschirm Sternchen "*" statt die eingegebenen Zeichen angezeigt. Paßwortfelder können beispielsweise mit folgendem Code erzeugt werden:

<input type="password" size="10" maxlength="20" name="txtPassword"
 value="abc">

Die Attribute entsprechen denen der TextBox.

HiddenBox

Die versteckten Felder ermöglichen es, Informationen (unsichtbar für den Benutzer) innerhalb eines HTML-Formulars unterzubringen, z.B. den Warenkorb eines Kunden. Sie können z.B. folgenderweise erzeugt werden:

<input type="hidden" name="txtWare1" value="buch123">
<input type="hidden" name="txtMenge1" value="1">

In value wird der zu übertragene Wert festgehalten.

TextArea

Mehrzeilige Eingabefelder, wie z.B.

<textarea cols="30" rows="5" name="txtLang" wrap="virtual">Hier
kann ein ziemlich langer Text eingegeben werden... bla bla
bla</textarea>

Mit cols und rows wird die Größe des Eingabebereichs (in Anzahl Zeichen) festgelegt.

ListBox

Auswahllisten, wie z.B.

<select multiple name="lstAuswahl" size="4">
  <option value="V1">Möglichkeit 1</option>
  <option value="V2" selected>Möglichkeit 2</option>
  <option value="V3">Möglichkeit 3</option>
  <option value="V4">Möglichkeit 4</option>
</select>

Wird das Attribut multiple weggelassen, so kann maximal eine Option ausgewählt werden, andernfalls beliebig viele. Das size-Attribut erlaubt optional die anzuzeigende Zeilenanzahl festzulegen. Mit selected können Optionen vorausgewählt werden. Mit value kann bestimmt werden, welcher Wert übertragen werden soll.

RadioButton

Auswahlknöpfe, wie z.B.

<input type="radio" name="optFarbe" value="rot">Rot
<input type="radio" name="optFarbe" value="gruen">Grün
<input type="radio" name="optFarbe" value="blau" checked>Blau

Der name bestimmt, welche Buttons zusammen gehören. Mit checked kann eine bestimmte Option vorausgewählt werden. Mit value kann wieder festgelegt werden, welcher Wert übertragen werden soll. Sollen die Optionen untereinander erscheinen, so müssen entsprechende <br>-Tags eingefügt werden.

CheckBox

Umschaltknöpfe, wie z.B.

<input type="checkbox" name="chkMenu" value="1">Vorspeise<br>
<input type="checkbox" name="chkMenu" value="2" checked>Hauptspeise<br>
<input type="checkbox" name="chkMenu" value="3">Nachspeise

Mit checked können Optionen vorausgewählt werden. Mit value kann wieder bestimmt werden, welcher Wert übertragen werden soll. Man beachte, dass die einzelnen Optionen hier durch <br> getrennt worden sind, damit sie untereinander aufgereit werden.

SubmitButton

Mit dem Absendeknopf können die im Formular gemachten Eingaben vom Benutzer abgeschickt werden. Er kann z.B. so aussehen:

<input type="submit" name="cmdSend" value="Los gehts!">

Mit value wird sowohl die Beschriftung des Buttons festgelegt, als auch der zu übertragene Wert. Dies ist insbesondere dann wichtig, wenn mehrere SubmitButtons definiert werden, die unterschiedliche Reaktionen auslösen sollen.

ResetButton

Mit dem Rücksetzknopf (optisch nicht von einem SubmitButton zu unterscheiden) werden alle getätigten Eingaben gelöscht, bzw. auf die voreingestellten Werte zurückgesetzt. Definiert wird er durch:

<input type="reset" value="von Vorne anfangen!">

Mit value wird die Beschriftung des Buttons festgelegt.

ImageButton

Der grafische Absendeknopf funktioniert genau wie ein SubmitButton, jedoch wird statt eines Buttons eine frei wählbare Grafik angezeigt. Er kann durch folgenden Code generiert werden:

<input type="image" name="cmdOK" src="ok.gif" width="60" height="30"
 alt="OK!">

Die Attribute entsprechen genau denen des <img>-Tags: src bestimmt die URL zur Grafikdatei, mit width und height kann optional die Größe der Grafik angegeben werden (empfehlenswert) und mit alt wird der Alternativtext definiert (nicht vergessen, schließlich könnte die Grafikanzeige deaktiviert sein).