HTML-Dateien selbst erstellen

Formulare

 Sinn und Zweck von Formularen
 Formular definieren
 Eingabefelder
 Auswahllisten
 Radio- und Checkbuttons
 Ausführungsbuttons
 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.

 HTML-Dateien selbst erstellen
 Formulare

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.

 HTML-Dateien selbst erstellen
 Formulare

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.

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.

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).

 HTML-Dateien selbst erstellen
 Formulare

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.

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.

 HTML-Dateien selbst erstellen
 Formulare

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.

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.

 HTML-Dateien selbst erstellen
 Formulare

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.

 HTML-Dateien selbst erstellen
 Formulare