HTML-Dateien selbst erstellen: Inhaltsverzeichnis


Formulare

 Sinn und Zweck von Formularen
 Formular definieren
 Eingabefelder
 Auswahllisten
 Radio- und Checkbuttons
 Ausführungsbuttons
 Frei definierbare Buttons
 Versteckte Elemente
 Anzeigebeispiel: Formular


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. Lesen Sie hierzu den Abschnitt  Formulare auswerten.

Der Vorteil eines Formulars ist, daß Sie vom Anwender ganz bestimmte Auskünfte einholen können. Von allen Anwendern, die das Formular ausfüllen, erhalten Sie gleichartige, datensatzorientierte Antworten. Mit einer entsprechenden Software-Schnittstelle können 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.

Auch viele Datenbanken im Internet bieten dem aufrufenden WWW-Browser in HTML geschriebene Eingabe-Formulare an, in denen der Anwender seinen Suchwunsch spezifizieren kann.

Beachten Sie jedoch, daß Formulare wirklich nur dazu gedacht sind, um datensatzartiges Feedback von den Anwendern zu erhalten. Wenn Sie dem Anwender auf Ihren WWW-Seiten einfach nur eine Möglichkeit anbieten wollen, direkt mit Ihnen in Kontakt zu treten, genügt ein  Email-Verweis an die eigene Email-Adresse.

Einige Beispiele im WWW für Formulare

 Yahoo
Frei zugängliche Datenbank mit mehreren Millionen registrierten WWW-Seiten. Suchmaske für Stichwortsuche. Bequemes Einstellen von Suchoptionen.
 Jazz-Datenbank -
Praktische Datenbank für Jazz-Fans. Suchformular mit Suchmöglichkeit nach Titeln, Interpreten und Datenträgern.
 Private Homepages -
Datenbank mit WWW-Homepages von Privatpersonen. Suche nach Namen, Stichworten und Internet-Domänen. Möglichkeit, die eigene private WWW- Homepage hinzuzufügen.


 Seitenanfang


HTML2 Formular definieren

Beispiel


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

<form ... > leitet ein Formular ein. Innerhalb des einleitenden Tags für das Formular 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 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. Üblich sind hier die Angaben method=post oder method=get. Wenn Sie sich vom Anwender  ausgefüllte Formulare als Email zusenden lassen, notieren Sie hier method=post.

Wenn Sie method=get wählen, werden die Daten des ausgefüllten Formulars auf WWW-Servern mit installiertem HTTP-Protokoll in der Standard-Umgebungsvariablen QUERY_STRING gespeichert. Das CGI-Programm muß den Inhalt dieser Umgebungsvariablen auslesen und verarbeiten. Wenn Sie dagegen method=post wählen, werden die Daten des augefüllten Formulars auf dem Server-Rechner von "stdin" zur Verfügung gestellt, und das CGI-Programm muß sie behandeln wie eine Benutzereingabe, die auf der Kommandozeile gemacht wurde. Da in diesem Fall kein EndOfFile-Signal (EOF) gesendet wird, muß das CGI- Programm die Standard-Umgebungsvariable CONTENT_LENGTH auslesen, um die Länge der übermittelten Daten und damit deren Ende zu ermitteln.

Mit </form> schließen Sie ein Formular ab.

Innerhalb von <form ... > und </form> können Sie neben den formulartypischen Elementen wie Eingabefeldern, Auswahllisten und Buttons auch Text, Absätze, Grafiken usw. notieren, um das Formular zu erläutern oder schöner zu gestalten.


 Seitenanfang


HTML2 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>

<input ... > definiert ein einzeiliges Eingabefeld. 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 "_". Setzen Sie den Namen in Anführungszeichen.

Ferner sollten Sie bei einzeiligen Eingabefeldern immer die Anzeigelänge in Zeichen (size=) sowie die interne Feldlänge in Zeichen (maxlength=) bestimmen. 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:

type=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.
type=float
Zur Eingabe von Dezimalkommazahlen. Mit size= kann die Stellenzahl begrenzt werden.
type=date
Zur Eingabe eines Kalenderdatums.
type=url
Zur Eingabe einer Internet-Adresse.
Im Zusammenhang mit JavaScript können bei einzeiligen Eingabefeldern auch  Event-Handler eingesetzt werden, um die Eingaben zu kontrollieren.

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>

<textarea ... leitet ein mehrzeiliges Eingabefeld ein. 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 "_". Setzen Sie den Namen in Anführungszeichen.

Dahinter folgen zwei Angaben zur Anzeigegröße des Textfelds. rows= bestimmt die Anzahl der angezeigten Zeilen, cols= die Anzahl der angezeigten Spalten.

Mit </textarea schließen Sie das mehrzeilige Eingabefeld ab. Wenn Sie das Eingabefeld mit Text vorbelegen wollen, notieren Sie den gewünschten Text zwischen <textarea...> und </textarea>.

WWW-Browser statten die mehrzeiligen Eingabefelder bei der Anzeige üblicherweise mit vertikalen und horizontalen Scrollbalken aus, sodaß der Anwender bei längeren Eingaben scrollen kann.

Netscape ab V2.0 Zeilenumbruch bei mehrzeiligen Eingabefeldern steuern

Wenn Sie nichts anderes angeben, führt der Browser bei der Eingabe in einem mehrzeiligen Eingabebereich keinen automatischen Zeilenumbruch durch. Das kann unerfahrene Anwender irritieren. Netscape kann ab Version 2.0 Anweisungen zur Kontrolle des Zeilenumbruchs interpretieren.

Beispiel


  Was hat Ihnen an unserem Produkt gefallen und was nicht:<p>
  <textarea name="feedback" rows=10 cols=50 wrap=virtual></textarea>

Mit der Zusatzangabe wrap= können Sie den Zeilenumbruch steuern. Mit wrap=virtual bewirken Sie, daß der Text bei der Eingabe automatisch umgebrochen wird. Beim Absenden des Formulars werden jedoch keine Zeilenumbruchzeichen übertragen. Mit wrap=physical bewirken Sie, daß der Text bei der Eingabe automatisch umgebrochen wird. Die Zeilenumbruchzeichen werden beim Absenden des Formulars mit übertragen. Mit wrap=off stellen Sie den Zeilenumbruch aus (Voreinstellung).

Im Zusammenhang mit JavaScript können bei mehrzeiligen Eingabefeldern auch  Event-Handler eingesetzt werden, um die Eingaben zu kontrollieren.


 Seitenanfang


HTML2 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 Text des oder der ausgewählten Einträge wird ü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>

<select ...> leitet eine Auswahlliste ein. 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 "_". Setzen Sie den Namen in Anführungszeichen.

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.

<option> definiert jeweils einen Eintrag der Auswahlliste. Hinter <option> muß der Text des Listeneintrags stehen.

Mit </select> wird die Auswahlliste abgeschlossen.

Im Zusammenhang mit JavaScript können bei Auswahllisten auch  Event-Handler eingesetzt werden, um die Eingaben zu kontrollieren.

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.


 Seitenanfang


HTML2 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 anzugebende Wert des oder der markierten Buttons wird übertragen, wenn der Anwender das Formular abschickt.

Radiobuttons

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 "_". Setzen Sie den Namen in Anführungszeichen.

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. Setzen Sie den Bezeichnerwert in Anführungszeichen.

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

Im Zusammenhang mit JavaScript können bei Radiobuttons auch  Event-Handler eingesetzt werden, um die Eingaben zu kontrollieren.

Checkbuttons

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 "_". Setzen Sie den Namen in Anführungszeichen.

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. Setzen Sie den Bezeichnerwert in Anführungszeichen.

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

Im Zusammenhang mit JavaScript können bei Checkbuttons auch  Event-Handler eingesetzt werden, um die Eingaben zu kontrollieren.


 Seitenanfang


HTML2 Ausführungsbuttons

Zwei Buttons stehen zum Beenden zur Verfügung: "Absenden" und "Abbrechen". Mit "Absenden" 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="Formular abschicken">.
  <input type=reset value="Eingaben verwerfen">.

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.

Im Zusammenhang mit JavaScript können bei Ausführungsbuttons auch  Event-Handler eingesetzt werden.


 Seitenanfang


Netscape 2 Frei definierbare Buttons

Sie können Buttons definieren, die wie Ausführungsbuttons aussehen, jedoch keine spezielle Bedeutung haben. Sinnvoll sind solche frei definierbaren Buttons vor allem in Verbindung mit JavaScript. In der Regel werden sie dazu verwendet, Verweise oder JavaScript-Code auszuführen.

Beispiel


  <input type=button value="Homepage" onClick="HandleLink(Homepage)">.

Mit <input type=button ...> definieren Sie einen Button. Die Beschriftung des Buttons bestimmen sie mit der Zusatzangabe value=. Um anzugeben, was passieren soll, wenn der Button angeklickt wird, können Sie den JavaScript  Event-Handler onClick= verwenden. Hinter dem Istgleichzeiten geben Sie einen JavaScript-Befehl ein, z.B. den Aufruf einer selbstgeschriebenen JavaScript-Funktion (wie im Beispiel).


 Seitenanfang


Netscape ab V1.1 Versteckte Elemente

Sie können Felder in einem Formular definieren, die dem Anwender nicht angezeigt werden. Versteckte Felder können jedoch Daten enthalten. Beim Absenden des Formulars im WWW werden versteckte Felder ebenso mit übertragen wie sichtbare.

Beispiel


  <input hidden value="Vor- und Zuname:">
  Vor- und Zuname: <input name="username" size=40 maxlength=60><p>

Das Beispiel bewirkt, daß die versteckte Zeichenkette "Vor- und Zuname" beim Abschicken des Formulars mit übertragen wird. Die Beschriftung vor dem Eingabefeld dagegen wird nicht mit übertragen.

Mit <input hidden...> definieren Sie ein verstecktes Feld. Mit der Angabe value= weisen Sie dem versteckten Feld einen Wert zu.


 HTML-Dateien selbst erstellen: Inhaltsverzeichnis
 Seitenanfang

Blättern:
Multimedia, Java-Applets und Plugin-Dateien  |  Formulare auswerten und weiterverarbeiten


© 1996  Stefan Münz