Die obigen Elemente werden überwiegend nach dem Schema

definiert , wobei nicht alle Attribute vorkommen müssen :

• value ist nur notwendig , wenn aus einer bestimmten Auswahl ein oder mehrere Punkte markiert werden sollen - also bei Radiobuttons und Checkboxen . ( Ausnahmen : Auswahllisten , Buttons zum Senden / Abbrechen , Klickbuttons ) . Das value - Attribut übernimmt aber auch noch andere Aufgaben .
• size ist nur notwendig , wo die Grösse eines Eingabefeldes überhaupt variieren kann ( Eingabefelder , Dateibuttons ) .
• maxlength ist nur nötig , wenn eine Datei oder Information in der Grösse variieren kann ( einzeiliges Eingabefeld - Anzahl Zeichen , Dateibuttons - Anzahl Bytes ) und man eine obere Grenze festlegen möchte . Bei mehrzeiligen Eingabfeldern (textarea) kann maxlength nicht definiert werden.

Einzig das <textarea> ... </textarea> - tag zum Einbinden von mehrzeiligen Eingabefeldern sowie Auswahllisten ( <select> ... </select> ) weichen von diesem Schema ab .

Sehen wir uns nun die einzelnen Elemente eines Formulars etwas genauer an :

einzeiliges Eingabefeld

Anmerkungen

• Dem Eingabefeld muss ein Name vergeben werden. (keine Leer- oder Sonderzeichen). Einen bestimmten Namen innerhalb eines Formulars nur einmal verwenden!
• Mit "size" wird die Grösse bzw. Länge des Eingabefeldes bezeichnet.
• Mit "maxlength" kann man eine obere Grenze für die Anzahl Zeichen festlegen. In diesem Beispiel ist bei 50 Zeichen Schluss.
• Für ein Passwort- Feld type="password" statt type="text" nehmen.

mehrzeiliges Eingabefeld

Anmerkungen

• Die Bedeutung der Attribute name und maxlength ist vom letzten Abschnitt her bekannt.
• rows sind die Reihen , cols die Kolonnen ( Linien ) des Feldes .
• Mit dem <textarea ... > ... </textarea> - Tag kann Text umschlossen werden , welcher dann im Eingabefeld erscheint :

Auswahllisten

Anmerkungen

• die Auswahlliste wird innerhalb des <select> ... </select>
- Tags definiert . Ein Name muss vergeben werden . Mit size wird die Anzahl Reihen der Auswahlliste festgelegt ( standardmässig eine ) . Mit multiple werden Mehrfachmarkierungen erlaubt ( Ctrl bzw. Strg drücken + mit dem Cursor markieren ) .
• Jeder einzelne Punkt der Auswahlliste wird mit einem <option>
eingeleitet , dahinter folgt der entsprechende Text . Fügt man das Attribut selected hinzu , ist der entsprechende Eintrag von Anfang an markiert .

Checkboxen

Anmerkungen

• Mit type=checkbox werden Checkboxen als Elemente festgelegt .
• Ihr müsst wieder einen Namen vergeben . Alle Elemente einer Gruppe erhalten den gleichen Namen .
• jede einzelne Checkbox erhält eine eigene Bezeichnung ( value - Wert ) .

Radiobuttons

Anmerkungen

• Radiobuttons werden nach dem gleichen Schema wie Checkboxen definiert - einziger Unterschied : Dem Attribut type wird der Wert radio zugewiesen .
• Der funktionelle Unterschied zwischen Radiobuttons und Checkboxen ? Aus einer Gruppe von Radiobuttons ist immer nur ein Wert wählbar , aus einer von Checkboxen mehrere .

Datei - Buttons

Anmerkungen

• Mit type=file wird ein Dateibutton definiert .
• Auch hier muss wieder ein Name vergeben werden ( name ).
• size bezeichnet die Grösse des Eingabefeldes , maxlength die maximale Grösse der zu empfangenden Datei in Bytes . In diesem Fall sind rund 100 KB definiert ( 1024 Bytes sind ein Kilobyte - mit dem Faktor 1000 lässt sich jedoch ungleich leichter rechnen . )
  
  ( Genau genommen : 100'000 : 1024 = 97.656 KB . )



• Mit dem Attribut accept kann ausserdem festgelegt werden , welche Dateiformate angenommen werden sollen . Dabei müssen sogenannte MIME - Typen ( = Multipurpose Internet Mail Extensions ) definiert werden .
  Wer sich dafür interessiert , konsultiere die entsprechende Tabelle : Hilfreiches - wichtige MIME - Typen .
  ( Ihr könnt accept natürlich auch weglassen . )

Buttons zum Senden / Abbrechen

Anmerkungen

• mit type=submit wird ein Button definiert , bei dessen Betätigung die Formulardaten verschickt werden . Der value - Wert regelt hier die Beschriftung .
• Analog wird der Button zum Abbrechen bzw. Zurücksetzen des Formulars mit type=reset definiert .
• Man kann das value - Attribut auch weglassen . Die Beschriftung wird in diesem Fall vom Browser des Anwenders festgelegt :

Grundsätzlich müssen Anfang und Ende des Formulars definiert werden . Wie ihr euch vielleicht vorstellen könnt , geschieht dies mit dem <form> ... </form> (form= engl . Formular ) - Tag . Dazu kommt noch eine Reihe von Attributen :

<form action="mailto:mail@provider.org" method=post enctype="text/plain">

Anmerkungen:

• action: Hier kann mit mailto: eine E-Mail-Adresse eingetragen werden, an welche die Daten gesendet werden. Allerdings sind ältere Browser dazu nicht in der Lage. Es sollte also mindestens eine Alternative ('Falls Ihr Browser das Senden per E-Mail...' etc.) angegeben werden.
  Statt "mailto:... " kann auch die Adresse eines CGI - Programms angegeben werden, welches die Formulardaten auswertet.
• enctype="text/plain": Damit wird verhindert, dass die Formulardaten im empfangenen Mail als 'Kauderwelsch' ausgegeben werden ( Bestimmte Zeichen werden nämlich beim Senden 'codiert' - Ein Leerzeichen wird z.B. als "20%" geschrieben ( oder %20 ? ;).
• method= get/ post: Falls ihr action="mailto:..." setzt, müsst ihr method=post definieren- das Formular schickt die Daten ja, es 'postet' sie. method=get muss dann stehen, falls das Formular Daten anfordern soll. - Genauer: (siehe auch: SelfHTML: Formulare und CGI / get und post/ SelfHTML: Formulare und CGI / Datenstrom bei Übertragung von Formulardaten)
• GET: Die Parameter werden an den URL angehängt, der Web-Server schreibt diese dann in die Umgebungsvariable QUERY_STRING. Das CGI-Programm liest anschliessend QUERY_STRING aus, um mit den Formulardaten arbeiten zu können. Abrufbar mit $variable = $ENV{'QUERY_STRING'};.
• POST: Die Parameter werden im Rumpf der Antwort direkt an das CGI-Skript übermittelt. Das Skript muss die Standard-Eingabe (STDIN) auslesen. Abrufbar mit $variable = <STDIN>. Praxis: read(STDIN, $variable, $ENV{'CONTENT_LENGTH'});. "Beachten Sie dabei, daß das Programm die Umgebungsvariable CONTENT_LENGTH auslesen muß, um zu ermitteln, wie viele Zeichen es von der Standardeingabe lesen soll. Das ist erforderlich, da der übergebene Datenstrom kein Datenendekennzeichen enthält!"
GET ist schneller, es kann ein konkreter URL gebookmarkt werden (Beispiel Suchmaschinen: http://www.google.com/search?q=CSS-Kurs), eignet sich aber nur bei kleineren Datenmengen.

Das CGI- Programm verlangt je nachdem GET oder POST oder ist auf beides ausgelegt:

if($ENV{'REQUEST_METHOD'} eq 'GET')
 {
  $Daten = $ENV{'QUERY_STRING'}
 }
else
 {
  read(STDIN, $Daten, $ENV{'CONTENT_LENGTH'});
 }

Standardmässig weisen alle Schaltflächen eines Formulars schwarzen Text auf grauem Hintergrund auf, Eingabefelder sind weiss. Diese Angaben können jedoch auch mittels CSS verändert werden: