Google Suche

 
Loading...
Loading...

Formulare

PDFDruckenE-Mail

 

HTML Grundkurs - Formulare

Formulare bieten die Möglichkeit, den Benutzer am Bildschirm Daten eingeben zu lassen, die dann in eine Variable geschrieben werden. Die Variable wird nach dem "CGI-BIN" - Standard an den WWW-Server geschickt und von diesem an ein Programm weitergegeben, das sie bearbeitet. Solche Programme sind betriebssystemabhängig und normalerweise nicht oder nicht ohne Anpassung portabel. Daher möchte ich darauf hier nicht näher eingehen, ein WWW-Server-Betreiber sollte sich nach geeigneten Programmen für das Betriebssystem seines Servers umsehen bzw. welche schreiben.

Beliebte Anwendungsfälle für Formulare sind Gästebücher, Feedback-Seiten (die eingegebene Rückmeldung geht per Mail zum Ersteller), Suchmaschinen, Datenbankgateways und interaktive Programme.

Ein HTML-Formular beginnt man mit <FORM> und beendet es mit </FORM>. Dabei gibt das Attribut ACTION an, mit welchem Programm das Formular Daten austauschen soll. Das Programm wird mit Hilfe einer URL bestimmt. Allerdings muss, der Server das Programm als CGI-Applikation erkennen. Dies geschieht, indem entweder alle CGI-Programme in einem speziellen Verzeichnis liegen oder eine bestimmte Endung haben. Sprechen Sie darüber mit Ihrem Server-Administrator. Sie können auch CGI-Programme auf fremden Servern mit eigenen Formularen ansprechen. Dies kann z. B. bei Suchmaschinen sinnvoll sein, um lange Ladezeiten zu vermeiden. So lässt sich etwa mit <form action="http://www.leo.org/cgi-bin/aliwebform.pl"> der deutsche Spiegel der Aiweb-Datenbank ansprechen. Wenn Sie die in das Formular eingegebenen Daten nur per Mail verschicken wollen, können Sie auch ohne CGI-Programm auskommen, indem Sie den Befehl <form action="mailto:Mailadresse"> verwenden.
Das Attribut
METHOD bestimmt, ob das Programm Informationen aus dem Formular erhält (METHOD=GET, wird auch verwendet, wenn das Element METHOD fehlt) oder ob das Programm einen Transfer auf den Bildschirm des Benutzers durchführen soll (METHOD=POST, so kann man etwa mit einer Kommandozeile eine Datenbankabfrage durchführen).
Das Attribut
ENCTYPE
bestimmt, wie die Datenübertragung kodiert werden soll. Ist kein Wert angegeben, wird application/x-www-form-urlencoded verwendet.

Eingabe von Daten

Eingabefelder werden mit dem Befehl <INPUT> erstellt. Das Element NAME gibt dabei den Namen der Variablen an, in die geschrieben werden soll. Es gibt verschiedene Typen von Eingabefeldern:

 

Die Ausgabe im Browser:


 

 

 

  • <INPUT TYPE=TEXT> erstellt ein einzeiliges Texteingabefeld. SIZE gibt die Größe in Buchstaben an, MAXLENGHT die Anzahl der maximal eingebbaren Buchstaben und VALUE den vorgegebenen Wert.
    Beispiel:
    <INPUT TYPE=TEXT NAME="x" SIZE=70 VALUE="Vorgabe">
    ergibt
  • <INPUT TYPE=PASSWORD> macht das gleiche wie TYPE=TEXT, stellt die Eingabe am Bildschirm jedoch als Sternchen dar. Aber Vorsicht: Die Eingabe wird im Klartext an den WWW-Server geschickt! Für Passworteingaben eignet es sich also nicht.
  • <INPUT VALUE=CHECKBOX> erlaubt dem Benutzer die Auswahl eines bestimmten Wertes mit Hilfe eines anklickbaren Kästchens. Lässt man dem Benutzer mehrere Kästchen zur Auswahl, so kann er auch mehrere gleichzeitig anklicken. VALUE bestimmt hier den Wert, der übermittelt wird, wenn das jeweilige Kästchen angeklickt wird. CHECKED gibt an, dass dieses Kästchen als Vorgabe bereits angeklickt ist.
    Beispiel:


  • <INPUT TYPE=RADIO> erzeugt einen anklickbaren Kreis mit den gleichen Eigenschaften wie CHECKBOX, nur dass bei mehreren Buttons nur einer gleichzeitig angeklickt werden kann.
  • <INPUT TYPE=HIDDEN> erlaubt die Eingabe eines Wertes, ohne daß der Benutzer ihn beeinflussen könnte. Dies ist beispielsweise bei Mail-Formularen nützlich, die auf ein gemeinsames MailTo-Programm zugreifen, aber jeweils nur an eine bestimmte Person Mail verschicken sollen. Hier kann man die Empfängeradresse per HIDDEN fest vorgeben.
  • <INPUT TYPE=SUBMIT> generiert einen Knopf, der, wenn er gedrückt wird, die Datenübertragung auslöst. VALUE bestimmt dabei die Aufschrift des Knopfes. Man kann ihn etwas breiter machen, indem man zwischen " und Buchstaben Platz lässt.
    Beispiel:

    <INPUT TYPE=SUBMIT VALUE=" OK ">

    ergibt:
  • <INPUT TYPE=RESET> stellt dagegen einen Knopf dar, der, wird er gedrückt, das Formular zurücksetzt. VALUE bestimmt auch hier die Aufschrift.
    Beispiel:

    <INPUT TYPE=RESET VALUE=" Abbrechen ">

    ergibt:
  • <INPUT TYPE=IMAGE> erstellt ein Submit-Icon, das genau wie ein Submit-Knopf funktioniert. Mit SRC= wird die URL der Grafik bestimmt und mit ALIGN kann das Icon wie ein Bild im Text angeordnet werden. Von solchen Submit-Icons ist aber abzuraten, weil sie zu Problemen mit textbasierten Browsern führen. Beispiel: <INPUT TYPE=IMAGE SRC="welt.gif" _cke_saved_SRC="welt.gif">
    ergibt:
  • <INPUT TYPE=FILE> ermöglicht es, Name und Pfad einer lokalen Datei per Formular abzufragen. Der Benutzer bekommt ein Textfeld zum Eintragen des Pfades und alternativ einen Knopf zum Aufruf eines Dateibrowsers angezeigt. Mit SIZE und MAXLENGHT kann man die Größe des Eingabefeldes bestimmen (siehe <INPUT TYPE=TEXT>).
    Beispiel:
    <INPUT TYPE=FILE NAME="file">

    ergibt:

Weitere Eingabefelder ohne INPUT (auch hier bestimmt NAME die Variable):

Die Ausgabe im Browser:

sieht dann so aus:

  • <SELECT> erstellt eine "Pull-Down-Box" zum direkten Anklicken eines bestimmten Wertes. <SELECT> wird durch </SELECT> abgeschlossen, dazwischen stehen die Auswahloptionen. Diese werden mit <OPTION VALUE= > erstellt, wobei VALUE den Wert festlegt. Hinter <OPTION steht der Text, den der Benutzer zu Gesicht bekommt. Fehlt VALUE, wird der Begriff hinter <OPTION> benutzt. Dort darf dann aber nur ein Wort stehen! SELECTED bestimmt die Vorgabe. Standardmäßig ist nur eine Option (die Vorgabe) auf den ersten Blick zu sehen, die anderen bei Anklicken. Mit SIZE kann jedoch die Zahl der sichtbaren Optionen bestimmt werden - bis hin zu allen. Das Attribut MULTIPLE erlaubt die gleichzeitige Anwahl mehrerer Punkte. Beispiel:


Wer ist online

Wir haben 16 Gäste online

Besucher

Heute47
Gestern825
Woche1561
Monat15681
Insgesamt494774
   
| Mittwoch, 23. Mai 2012 || Compu-Seite Compu-Seite |