Formulare in HTML

Das Form-Element in HTML

Mit dem Form-Element werden Eingabe-Formulare in HTML-Dokumente eingebettet. Ein Dokument kann mehrere Form-Elemente enthalten, sie können aber nicht geschachtelt werden.

<FORM ACTION="formtest.php" METHOD=POST>
Strukturierter Text und Eingabefelder
</FORM>

Attribute des Form-Elementes:

ACTION

URL, der angibt, wohin die Formulareingabe geschickt werden soll. Typischerweise

der Pfad auf ein sog. CGI-Programm auf dem Server, das über das Common Gateway Interface (CGI) vom HTTP-Server die Eingabedaten erhält und dynamisch ein neues Dokument erzeugt; häufig beginnt ein solcher Pfad mit /cgi-bin/;
ein PHP-Skript wie in diesem Beispiel; dies ist ein Dokument wie ein HTML-Dokument abgelegt, aber es ist zusätzlich mit Skript-Code in der Sprache PHP angereichert; diese Skript-Sprache muss der Server, auf dem ich meine Seiten habe, unterstützen;
ein mailto:-URL; dies muss nur der Browser unterstützen; das Format der E-Mails mit den Formulareingaben ist nicht gut lesbar.

METHOD

Bei HTTP-URLs: GET oder POST; im ersten Fall werden die Formulareingaben vom Browser hinter einem Fragezeichen an den URL angehängt, im zweiten Fall als Daten des Post-Request mitgeschickt.

ENCTYPE

Bei METHOD=POST der MIME-Typ, in dem die Daten verpackt werden; definiert und Default für diesen Zweck ist application/x-www-form-urlencoded.

Mit den Elementen INPUT, SELECT und TEXTAREA lassen sich HTML-Formulare flexibel gestalten mit all dem, was heutige graphische Benutzeroberflächen (Graphical User Interfaces - GUIs) bieten: Radio Buttons, Checkboxes, Pop-up Menus.

Hinter der folgenden Linie beginnt das Beispiel-Formular.

Text

Mein Name ist <INPUT NAME="id" TYPE=TEXT SIZE="20" MAXLENGTH="80">
Mein Name ist

Der Attributwert zu NAME wird dem eingegebenen Wert bei der Übertragung der Formular-Eingabe vorangestellt. TYPE=TEXT ist der Standardwert bei INPUT. SIZE gibt die Anzahl der dargestellten Eingabestellen an, MAXLENGTH die Anzahl der möglichen (u.U. größer als der SIZE-Wert, Voreinstellung: unbeschränkt). Mit VALUE="irgendwas" kann das Feld mit Text vorbesetzt werden. Wenn statt TYPE=TEXT TYPE=PASSWORD angegeben wird, bedeutet dies eine unsichtbare Eingabe.

Versteckte Eingabe

<INPUT TYPE=HIDDEN NAME="orig" VALUE="Test-Formular">

Es wird das Name/Wert-Paar orig=Test-Formular in der Formulareingabe generiert - ohne Benutzerintervention.

Radio Buttons

Ich bin <INPUT NAME="Geschlecht" TYPE=RADIO VALUE="W">weiblich
<INPUT NAME="Geschlecht" TYPE=RADIO VALUE="M">männlich.
Ich bin weiblich männlich.

Es wird entweder Geschlecht=W oder Geschlecht=M zurückgeschickt. Durch ein Attribut namens CHECKED - ohne Wertzuweisung - kann ich einen Radio-Button vorbesetzen.

Checkboxes

Ich arbeite mit folgenden Systemen:
<INPUT NAME="Plattform[]" TYPE=CHECKBOX VALUE="msdos">MS-DOS
<INPUT NAME="Plattform[]" TYPE=CHECKBOX VALUE="mswin">MS-Windows
<INPUT NAME="Plattform[]" TYPE=CHECKBOX VALUE="mac">Macintosh
<INPUT NAME="Plattform[]" TYPE=CHECKBOX VALUE="unix">Unix
<INPUT NAME="Plattform[]" TYPE=CHECKBOX VALUE="unix-x">Unix/X.11
<INPUT NAME="Plattform[]" TYPE=CHECKBOX VALUE="sonst">Anderes
MS-Windows Macintosh Unix Unix/X.11 Anderes

Bei den "Ankreuzkästchen" können im Gegensatz zu den "Radiotasten" mehrere Alternativen gewählt werden. Es werden dann mehrere Paare mit Namen und Wert generiert, insbesondere sind die Namen vor den Gleichheitszeichen dann nicht mehr eindeutig.

Hier wurde ein Name mit [] endend gewählt, weil der PHP-Interpreter dann eine Array-Variable erzeugt mit den einzelnen Werten ansprechbar über Indizes 0, 1,...

Durch ein Attribut namens CHECKED - ohne Wertzuweisung - können hier auch mehrere Ankreuzkästchen vorbesetzt werden.

Auswahlmenüs

Mein bevorzugter WWW-Browser ist
<SELECT NAME="Browser">
<OPTION>Netscape/Windows
<OPTION>Netscape/Mac
<OPTION>Netscape/Unix
<OPTION>Internet Explorer/Windows
<OPTION>Internet Explorer/Mac
<OPTION>Opera/Windows
<OPTION>Opera/Mac
<OPTION>Opera/Unix
<OPTION>Lynx
</SELECT>
Mein bevorzugter WWW-Browser ist

Funktionell ähnlich wie Radio Buttons, aber füer längere Listen geeignet. Bei SELECT gibt es als weitere Attribute MULTIPLE (ohne Wert) und ROWS (Anzahl darzustellender Alternativen); bei OPTION kann mit VALUE=... ein anderer zurückzugebender Wert gewählt werden. Das Attribut CHECKED gibt es auch hier.

Ich verwende folgende WWW-Browser:
<SELECT NAME="Browsers[]" MULTIPLE ROWS="4">
<OPTION VALUE="1">Netscape/Windows
<OPTION VALUE="2">Netscape/Mac
<OPTION VALUE="3">Netscape/Unix
<OPTION VALUE="4">Internet Explorer/Windows
<OPTION VALUE="5">Internet Explorer/Mac
<OPTION VALUE="6">Opera/Windows
<OPTION VALUE="7">Opera/Mac
<OPTION VALUE="8">Opera/Unix
<OPTION VALUE="9">Lynx
<OPTION VALUE="10">anderer
</SELECT>
Ich verwende folgende WWW-Browser:

Textarea

<TEXTAREA NAME="comment" ROWS="4" COLS="60">
Hier können Sie Ihren Kommentar abgeben.
</TEXTAREA>

Mit dem TEXTAREA-Element kann ein Eingabefeld für längeren, mehrzeiligen Text geschaffen werden. Die Werte des ROWS- und COLS-Attributes geben die Dimension des sichtbaren Ausschnitts an. Von den Browsern werden meist Rollbalken (Scroll bars) verwendet, um weiteren Text eingeben und ansehen zu können.

Submit-Button

<INPUT VALUE="Formular abschicken" TYPE=SUBMIT>

Erzeugt einen Knopf mit der hinter dem VALUE-Attribut gewählten Beschriftung; Anklicken dieses Knopfes hat die Bedeutung, daß die Formulareingaben entsprechend der Angaben im FORM-Element abgeschickt werden. Ein eventueller Attributwert zu NAME= wird zusammen mit dem zu VALUE= übertragen.

Reset-Button

<INPUT VALUE="Formular löschen" TYPE=RESET>

Erzeugt einen Knopf mit der hinter dem VALUE-Attribut gewählten Beschriftung; Anklicken dieses Knopfes hat die Bedeutung, daß die Formulareingaben gelöscht und die Anfangswerte wiederhergestellt werden.

Submit-Graphik

<INPUT NAME="submit" TYPE=IMAGE SRC="/grafik/Symbols/action.gif">

Eine Graphik/ein Inline-Image als selbst gestalteter Submit-Button.

Hier endet das Formular.

Verarbeiten der Formulareingaben

Formulareingaben werden i.d.R. von einem Programm oder Skript (z.B. übersetztes C-Programm, Perl-Programm, Skript in der Bourne- oder anderen Unix-Shell) verarbeitet, das dynamisch - on the fly - ein Dokument erzeugt oder die Referenz auf ein gesuchtes Dokument liefert. Bequemer geht es mit einem PHP-Skript wie in dem Beispiel hier. Alle Werte aus Eingabefeldern liegen in dem PHP-Skript als Inhalte von Variablen vor; die Namen der Variablen sind gleich den Werten der NAME-Attribute aus den Eingabeelementen.

Das Beispiel-Skript zeigt nur die eingegebenen Werte aus den diversen Eingabeelementen an und macht keine wirkliche Verarbeitung. Hier der PHP-Quelltext als Text und als PHP-Quell-Ansicht.

Zum Illustration folgt hier nochmal das gleiche Formular, aber mit METHOD=GET.

Bernd Cappel, 29.5.1995
Erstellt für eine Lehrveranstaltung des URZ der HHU im Sommersemester 1995; zuletzt geändert am 7.3.2002