Formulare in HTML-Dateien


Sinn und Zweck von Formularen

HTML stellt die Möglichkeit zur Verfügung, mit Hilfe spezieller Befehle Formulare zu erstellen. In Formularen kann der Anwender Eingabefelder ausfüllen, in mehrzeiligen Textfeldern Text eingeben, aus Listen Einträge auswählen und Buttons anklicken. Wenn das Formular fertig ausgefüllt ist, kann der Anwender auf einen Button klicken, um das Formular übers Internet abzusenden.

Dazu geben Sie beim Erstellen eines Formulars an, was mit den Daten des ausgefüllten Formulars passieren soll. Üblicherweise geben Sie eine Internet-Adresse an, an die die Daten des ausgefüllten Formulars übertragen werden.

Der Vorteil eines Formulars gegenüber einem einfachen e-mail-Verweis ist, daß Sie vom Anwender ganz bestimmte Auskünfte einholen können. Von allen Anwender, die das Formular ausfüllen, erhalten Sie gleichartige, datensatzorientierte Antworten. Mit einer entsprechenden Software-Schnittstelle könnten Sie diese Daten z.B. automatisch in eine Datenbank einlesen.

Ein Software-Hersteller könnte z.B. ein Formular zur Verfügung stellen, in dem der Anwender angeben kann, welche Produkte der Firma er besitzt, wie er Kenntnis von den Produkten erhalten hat, welchen Beruf er ausübt, auf welchem Rechnertyp die Software bei ihm läuft usw.

Einige Internet-Server-Rechner senden auch (mit Hilfe von Batchdateien) HTML-Code mit Formular-Anweisungen an den WWW-Browser. Auf diese Weise ist es möglich, daß der Anwender, der auf einen Server-Rechner zugreifen will, eine Eingabemaske erhält, in der er sich als berechtigter Benutzer mit Paßwort und ID ausweisen muß. Auch viele Suchprogramme im Internet bieten dem aufrufenden WWW-Browser in HTML geschriebene Eingabe-Formulare an, in denen der Anwender seinen Suchwunsch spezifizieren kann.

Einige Beispiele im WWW für Formulare


Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Verweise und Referenzen in HTML-Dateien

Formular definieren

Ein Formular wird durch das Tag <form> eingeleitet und mit </form> beendet. Dazwischen werden die Elemente des Formulars definiert.

Beispiel:

  <form  action="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query" method="post">
  Hier folgen die einzelnen Elemente des Formulars
  </form>
Hinter dem einleitenden <form folgen zwei Angaben: action= und method=.

Bei action= geben Sie die Internet-Adresse an, zu der das ausgefüllte Formular geschickt werden soll. Die Internet-Adresse besteht aus:

"post-query" ist vermutlich ein Programm oder ein Shellscript (Batch-Datei), das die ankommenden ausgefüllten Formulare weiterverarbeitet.

Bei method= geben Sie die Methode an, mit der die Formulardaten an den Server-Rechner übermittelt werden. Üblicherweise wird hier method="post" angegeben. Wenn Sie WWW-Seiten mit Formularen erstellen, müssen Sie ggfs. vorher die Systemverwaltung des Server-Rechners fragen, ob Sie die Angabe method= überhaupt brauchen, und wenn ja, ob method="post" korrekt ist.


Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Formulare in HTML-Dateien

Eingabefelder

Es gibt einzeilige und mehrzeilige Eingabefelder.

Einzeilige Eingabefelder

Einzeilige Eingabefelder dienen zur Aufnahme von einem oder wenigen Wörtern oder einer Zahl.

Beispiel:

  Ihr Name: <input name="username" size="40" maxlength="60"><p>
  Ihr Paßwort: <input name="pwd" type="password" size="16" maxlength="16"><p>
Einzeilige Eingabefelder werden durch das Tag <input ... > definiert. Jedes Eingabefeld muß einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name=. Der Name sollte nicht zu lang sein und darf keine Leerzeichen und keine deutschen Umlaute enthalten. Verwenden Sie als Sonderzeichen höchstens den Unterstrich "_". Der Name muß in Anführungszeichen stehen.

Ferner sollten Sie bei einzeiligen Eingabefeldern immer die Anzeigelänge in Zeichen (size=) sowie die interne Feldlänge in Zeichen (maxlength=) bestimmen. Alle Zahlenangaben müssen in Anführungszeichen stehen. Wenn die interne Feldlänge größer ist als die angezeigte Feldlänge (wie im ersten der Beispiele), dann wird bei längeren Eingaben automatisch gescrollt (im Beispiel also ab dem 41. eingegebenen Zeichen).

Bei Feldeingaben, die verdeckt erfolgen sollen, verwenden Sie wie im zweiten der Beispiele angegeben den Zusatz type="password". Bei der Dateneingabe erscheinen dann nur Sternchen im Eingabefeld.

Folgende andere Angaben sind bei type= möglich:

"int"
Zur Eingabe von Ganzzahlen. Mit size= kann die Stellenzahl begrenzt werden. Mit den zusätzlichen Angaben min= und max= kann ein genauer erlaubter Wertebereich definiert werden.
"float"
Zur Eingabe von Dezimalkommazahlen. Mit size= kann die Stellenzahl begrenzt werden.
"date"
Zur Eingabe eines Kalenderdatums.
"url"
Zur Eingabe einer Internet-Adresse.

Mehrzeilige Eingabefelder

Mehrzeilige Eingabefelder dienen zur Aufnahme von Notizen, Nachrichten usw.

Beispiel:

  Was hat Ihnen an unserem Produkt gefallen und was nicht:<p>
  <textarea name="feedback" rows="10" cols="50"</textarea>
Mehrzeilige Eingabefelder werden durch das Tag <textarea ... eingeleitet. Jedes mehrzeilige Eingabefeld muß einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name=. Der Name sollte nicht zu lang sein und darf keine Leerzeichen und keine deutschen Umlaute enthalten. Verwenden Sie als Sonderzeichen höchstens den Unterstrich "_". Der Name muß in Anführungszeichen stehen.

Dahinter folgen zwei Angaben zur Anzeigegröße des Textfelds. rows= bestimmt die Anzahl der angezeigten Zeilen, cols= die Anzahl der angezeigten Spalten. Die Zahlen müssen in Anführungszeichen stehen.

WWW-Browser statten die mehrzeiligen Eingabefelder bei der Anzeige üblicherweise mit vertikalen und horizontalen Scrollbalken aus.


Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Formulare in HTML-Dateien

Auswahllisten

Sie können dem Anwender eine Liste mit festen Einträgen anbieten, aus der er einen oder mehrere Einträge auswählen kann. Der oder die ausgewählten Einträge werden übertragen, wenn der Anwender das Formular abschickt.

Beispiel:

  Wählen Sie Ihren Favoriten aus der Liste aus:<p>
  <select name="top5" size="3">
  <option> Heino
  <option> Michael Jackson
  <option> Tom Waits
  <option> Nina Hagen
  <option> Marianne Rosenberg
  </select>
Auswahllisten werden durch das Tag <select ...> eingeleitet. Jede Auswahlliste muß einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name=. Der Name sollte nicht zu lang sein und darf keine Leerzeichen und keine deutschen Umlaute enthalten. Verwenden Sie als Sonderzeichen höchstens den Unterstrich "_". Der Name muß in Anführungszeichen stehen.

Mit der Angabe size= bestimmen Sie die Anzeigegröße der Liste, d.h. wie viele Einträge angezeigt werden sollen. Wenn die Liste mehr Einträge enthält als angezeigt werden, kann der Anwender in der Liste scrollen. Die Zahl der anzuzeigenden Einträge muß in Anführungszeichen stehen.

Die Einträge der Liste werden jeweils durch ein Tag <option> definiert. Hinter <option> muß der Text des Listeneintrags stehen.

Mit </select> wird die Auwahlliste abgeschlossen.

Auswahllisten mit Mehrfachauswahl

Per Voreinstellung kann der Anwender einen Eintrag aus einer Auswahlliste auswählen. Wenn Sie eine Mehrfachauswahl erlauben wollen, müssen Sie dies gesondert angeben.

Beispiel:

  Wählen Sie alle Ihre Favoriten aus der Liste aus:<p>
  <select name="top5" size="3" multiple>
  <option> Heino
  <option> Michael Jackson
  <option> Tom Waits
  <option> Nina Hagen
  <option> Marianne Rosenberg
  </select>
Die Mehrfachauswahl erlauben Sie durch die zusätzliche Angabe multiple im einleitenden Tag von <select ...>.

Einträge in Auswahllisten vorselektieren

Sie können veranlassen, daß bestimmte Einträge in der Liste bei der Anzeige bereits selektiert sind.

Beispiel:

  Wir empfehlen Ihnen folgenden Favoriten:<p>
  <select name="top5" size="3">
  <option> Heino
  <option> Michael Jackson
  <option selected> Tom Waits
  <option> Nina Hagen
  <option> Marianne Rosenberg
  </select>
Um einen Eintrag der Auswahlliste vorzuselektieren, geben Sie im Tag <option ... > des betreffenden Eintrags den Zusatz selected an.
Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Formulare in HTML-Dateien

Radio- und Checkbuttons

Radiobuttons sind eine Gruppe von beschrifteten Buttons, aus der der Anwender einen markieren kann. Es kann immer nur einer der Buttons markiert sein. Einer ist stets markiert.

Checkbuttons sind eine Gruppe von beschrifteten Buttons, aus der der Anwender keinen, einen oder mehrere markieren ("ankreuzen") kann.

Der oder die markierten Buttons werden übertragen, wenn der Anwender das Formular abschickt.

Radiobuttons

Eine Gruppe von Radiobuttons definieren Sie wie folgt.

Beispiel:

 Geben Sie Ihre Zahlungsweise an:<p>
 <input type="radio" name="paymethod" value="mastercard"> Mastercard
 <input type="radio" name="paymethod" value="visa"> Visa
 <input type="radio" name="paymethod" value="americanexpress"> American Express
Radiobuttons werden durch das Tag <input ...> eingeleitet. Dahinter folgt die Angabe type="radio". Jeder Radiobutton muß einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name=. Alle Radiobuttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen markieren. Der Name sollte nicht zu lang sein und darf keine Leerzeichen und keine deutschen Umlaute enthalten. Verwenden Sie als Sonderzeichen höchstens den Unterstrich "_". Der Name muß in Anführungszeichen stehen.

Mit der Angabe value= bestimmen Sie einen internen Bezeichnerwert für jeden Radiobutton. Wenn der Anwender das Formular abschickt, wird der Bezeichnerwert des markierten Buttons übertragen.

Hinter dem Tag geben Sie den Text ein, mit dem der Radiobutton bei der Anzeige beschriftet sein soll.

Checkbuttons

Eine Gruppe von Checkbuttons definieren Sie wie folgt.

Beispiel:

  Geben Sie bei der Pizzabestellung die gewünschten Zutaten an:<p>
  <input type="checkbox" name="zutat" value="salami"> Salami
  <input type="checkbox" name="zutat" value="pilze"> Pilze
  <input type="checkbox" name="zutat" value="sardellen"> Sardellen
 
Checkbuttons werden durch das Tag <input ...> eingeleitet. Dahinter folgt die Angabe type="checkbox". Jeder Checkbutton muß einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name=. Alle Checkbuttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender keinen, einen oder mehrere ankreuzen. Der Name sollte nicht zu lang sein und darf keine Leerzeichen und keine deutschen Umlaute enthalten. Verwenden Sie als Sonderzeichen höchstens den Unterstrich "_". Der Name muß in Anführungszeichen stehen.

Mit der Angabe value= bestimmen Sie einen internen Bezeichnerwert für jeden Checkbutton. Wenn der Anwender das Formular abschickt, werden die Bezeichnerwerte des oder der angekreuzten Buttons übertragen.

Hinter dem Tag geben Sie den Text ein, mit dem der Checkbutton bei der Anzeige beschriftet sein soll.


Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Formulare in HTML-Dateien

Ausführungs-Buttons

Wie in Dialogboxen üblich, gibt es zwei Buttons zum Beenden: "OK" und "Abbrechen". Mit "OK" schickt der Anwender das Formular ab. Mit "Abbrechen" werden alle Eingaben gelöscht und Auswahlmöglichkeiten auf die voreingestellten Werte zurückgestellt.

Beispiel:

  <input type="submit" value="OK">.
  <input type="reset" value="Abbrechen">.
Ausführungsbuttons werden durch das Tag <input ...> eingeleitet. Dahinter folgt die Angabe type=, und zwar: Mit der Angabe value= bestimmen Sie die Beschriftung der Buttons. Der Beschriftungstext muß in Anführungszeichen stehen.

Hinweis: Den Button zum Abbrechen und Löschen der Eingaben können Sie auch weglassen, da der Anwender in seinem WWW-Browser genügend Navigationsmöglichkeiten hat, um den Vorgang (d.h. das Ausfüllen des Formulars) abzubrechen.


Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Formulare in HTML-Dateien