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. Üblicherweise geben Sie eine Internet-Adresse an, an die die Daten des ausgefüllten Formulars übertragen werden.

Der Vorteil eines Formulars 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

Cardiff's Filmdatenbank -
ArchiePlex Formular-Schnittstelle -
Bestellformular für Wetterkarten -

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. Fragen Sie hierzu in jedem Fall Ihren Provider!

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

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.

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

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