Die HTML-Formulare

Nutzen eines Formulars

Die interaktiven Formulare ermöglichen es den Autoren von Webseiten ihre Seite mit interaktiven Elementen zu versehen, die es ermöglichen, einen Dialogweb mit den Cybernauten herzustellen, in der Art der Antwort-Coupons in manchen Zeitschriften

Der Leser gibt Informationen ein indem er Felder ausfüllt oder auf Schaltflächen klickt, dann drückt er auf den Abgabe-Knopf (submit) um das Formular entweder an ein URL, d.h. meist an eine E-mail Adresse oder einen Script einer dynamischen Web-Seite wie PHP, ASP oder ein CGI-Script.

Das Kennzeichen FORM

Die Formulare sind durch folgendes Kennzeichen abgegrenzt <FORM> ... </FORM>, ein Kennzeiche mit dem man mehrere Elemente eines Formulars zusammenlegen (Schaltflächen, Eingabefelder,...) kann und die folgende Attribute besitzen muss :

• METHOD gibt an in welcher Form die Antworten gesendet werden
  « POST » ist der Wert der dem Versand von Daten entspricht die im Hauptteil des Fragebogens gespeichert sind, während « GET » dem Versand von Daten entspricht die in URL codiert sind und von der Script-Adresse durch ein Fragezeichen getrennt sind für weitere Information über die POST und GET Methoden, lesen Sie den Artikel über das HTTP-Protokol)
• ACTION gibt die Versandadresse an (Script CGI oder Email-Adresse (mailto:adresse.email@machine))

Das Kennzeichen FORM besitz als Wahlattribut ENCTYPE der die Codierung der Daten in URL spezifiziert allerdings ist es nicht nötig dies anzugeben den der vorgebene Standardwert (application/x-www-form-urlencoded) ist der einzig gültige Wert. Das Wahlattribut ACCEPT ermöglicht die Definition der MIME-Typen der Daten die mit dem Formular gesendet werden können.

Hier die Syntaxe des Kennzeichens FORM :

<FORM METHOD="POST" ou "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">
...
</FORM>

Hier ein paar Beispiele für Kennzeichen FORM :

<FORM METHOD=POST ACTION="mailto:webmaster@kioskea.net">

<FORM METHOD=GET ACTION="http://de.kioskea.net/cgi-bin/script.cgi">

In dem Kennzeichen FORM...

Das Kennzeichen FORM ist in gewisser Weise ein Behälter in dem Elemente zusammengeführt werden können die es dem Benutzer ermöglichen Daten oder Datensätze auszuwählen oder einzugeben, die an die URL gesendet werden, die im Attribut angegeben ist ACTION des Kennzeichens FORMdurch die Methode die im Attribut angegeben ist METHOD.

Es ist möglich jedes beliebige HTML-Basiselement in ein Kennzeichen einzufügen FORM (Texte, Schaltflächen, Tabellen, Links…), aber es ist vor allem interessant interaktive Elemente einzufügen. Diese interaktiven Elemente sind :

• Das Kennzeichen INPUT: eine Gruppe von Schaltflächen und Eingabefeldern
• Das Kennzeichen TEXTAREA: ein Eingabefeld
• Das Kennzeichen SELECT: eine Multiple-Choice Liste

Senden der Daten

Wenn ein Formular abgegeben ist (Drücken auf den Abgabe-Knopf), werden die Daten die sich in dem Formular befinden dem CGI-Script gesendet, und zwar in Form von Paaren Name/Wert, d.h. eines Datensatzes der durch den Namen des Formularelements vertreten wird, das Zeichen "=", gefolgt von dem assozierten Wert. Alle diese Paare Namen/Wert werden durch ein ET-Zeichen (Zeichen &) voneinander getrennt. Die gesendeten Daten sehen demnach aus wie folgt :

Feld1=Wert1&Feld2=Wert2&Feld3=Wert3

Im Fall der Methode GET (Senden der Daten durch URL), URL ähnelt folgender Kette :

http://de.kioskea.net/cgi-bin/script.cgi?champ1=val1&champ2=val2

Das Kennzeichen INPUT

Das Kennzeichen INPUT ist das wesentliche Kennzeichen der Formulare, denn es ermöglicht, eine ganze Reihe von "interaktiven" Elementen herzustellen. Die Syntax dieses Kennzeichens ist folgende :

<INPUT type="Name des Feldes" value="standardmässiger Vorgabewert" name="Name des Elements">

Das Attribut name ist ganz wesentlich, da durch ihn der Script CGI das Feld kennt, dass dem Paar Name/Wert assoziiert ist, d.h. der Name des Feldes ist gefogt von dem Zeichen "=" dann der Wert der von dem Benutzer eingegeben worden ist, bzw. der standardmässige Vorgabewert der vom Attribut erkannt wird value.
Mit dem Attribut type kann der Elementtyp der das Kennzeichenpermet de préciser le type d'élément que représente la balise INPUT, hier die Werte die dieses Feld annehmen kann :

• checkbox: es handelt sich Felder zum ankreuzen die zwei Zustände annehmen können : checked (angekreuzt) und unchecked (nicht angekreuzt). Wenn das Feld angekreuzt ist wird das Paar Name/Wert an den CGI gesendet
• hidden: es handelt sich um ein verdecktes Feld. Dieses auf dem Formular nicht sichtbare Feld dient dazu einen feststehenden Parameter einzugeben, der an den CGI in Form eines Paares Name/Wert gesendet wird
• file: es handelt sich um ein Feld mitdem der Benutzer den Speicherplatz einer Datei angeben kann, die mit dem Formular gesendet wird. In diesem Fall muss angegeben werden welcher Datentyp mit diesem Attribut gesendet werden kann ACCEPTvon dem Kennzeichen FORM
• image: es handelt sich um einen individuel gestalteten Abgabeknopf, dessen Erscheinungsbild das Bild ist, dass sich an dem Speicherplatz befindet, der von dem Attribut angegeben wird SRC
• password: es handelt sich um ein Eingabefeld, in dem die eingegebenen Zeichen in Form von Sterncher erscheinen um so die Eingabe des Benutzers zu verdecken
• radio: es handelt sich um einen Knopf mit dem eine Wahl zwischen verschiedenen Möglichkeiten gemacht werden kann (alle "radio" Knöpfe müssen das gleiche Attribut haben name. Das Paar Name/Wert des gewählten "radio" Knopfes wird an den CGI gesendet. Ein Attribut checked für einen der Knöpfe ermögliche einen Knopf als Standardvorgabe anzugeben
• reset: es handelt sich um einen Nullrückstellungsknopf der ausschliesslich dazu dient alle Elemente des Formulars auf ihre ursprünglichen Standardvorgabe-Werte zurückzustellen
• submit: es handelt sich um den Abgabeknopf mit dem das Formular gesendet wird. Der Text des Knopfes kann mit dem Attribut angegeben werden value
• text: es handelt sich um ein Eingabefeld mit dem eine Textzeile eingegeben werden kann. Die Grösse des Eingabefeldes kann mit dem Attribut definiert werden size und der maximale Umfang des Textes mit dem Attribut eingegeben werden. maxlength

Das Kennzeichen TEXTAREA

Das Kennzeichen TEXTAREA erlaubt es einen umfangreichere Eingabezone zu definieren im Vergleich einfachen Eingabezeile die das Kennzeichen bietet INPUT. Dieses Kennzeichen besitzt folgende Attribute :

• cols: steht für die Anzahl der Zeichen die eine Zeile aufnehmen kann
• rows: steht für die Anzahl der Zeilen
• name: steht für den Namen der mit dem Feld verbunden wird, es ist der Name mit dem das Feld in dem Paar Name/Wert identifiziert wird
• readonly: ermöglicht es den Benutzer daran zu hindern, den Standardvorgabetext in dem Feld zu ändern
• value: Steht für den Wert der als Standardvorgabe an den Script geschickt wird, wenn das Eingabefeld nicht durch eine Eingabe des Benutzers geändert wird

Das Kennzeichen SELECT

Mit dem Kennzeichen SELECT kann eine Abrollliste von Elementen geschaffen werden (durch das Kennzeichen angegeben OPTION innerhalb des letztern). Die Attribute dieses Kennzeichens sind :

• name: steht für den Namen der mit dem Feld verbunden wird, es ist der Name mit dem das Feld in dem Paar Name/Wert identifiziert wird
• disabled: hier kann eine nicht aktivierte Liste geschaffen werden, die in grau angezeigt wird
• size: steht für die Anzahl der Zeilen in der Liste (dieser Wert kann grösser sein als die Anzahl der tatsächlichen Elemente der Liste)
• multiple: zeigt die Möglichkeit für den Benutzer an, mehrere Felder in der Liste zu wählen

Ein Formular-Beispiel

Das Layout der Formulare kann mit Hilfe von Tabellen gemacht werden (dies ist sogar empfehlenswert für eine gepflegtes Layout ). Hier ein Beispiel, dass genannten Punkte zusammenfasst und zeigt wie das Layout eines Formulars mit Hilfe einer Tabelle gemacht werden kann :

<FORM method=post action="cgi-bin/script.pl">
Enregistrement d'un utilisateur
<TABLE BORDER=0>
<TR>
	<TD>Nom</TD>
	<TD>
	<INPUT type=text name="nom">
	</TD>
</TR>

<TR>
	<TD>Prénom</TD>
	<TD>
	<INPUT type=text name="prenom">
	</TD>
</TR>

<TR>
	<TD>Sexe</TD>
	<TD>
	Homme : <INPUT type=radio name="sexe" value="M">
	<br>Femme : <INPUT type=radio name="sexe" value="F">
	</TD>
</TR>

<TR>
	<TD>Fonction</TD>
	<TD>
	<SELECT name="fonction">
		<OPTION VALUE="enseignant">Enseignant</OPTION>
		<OPTION VALUE="etudiant">Etudiant</OPTION>
		<OPTION VALUE="ingenieur">Ingénieur</OPTION>
		<OPTION VALUE="retraite">Retraité</OPTION>
		<OPTION VALUE="autre">Autre</OPTION>
	</SELECT>
	</TD>
</TR>
<TR>
	<TD>Commentaires</TD>
	<TD>
	<TEXTAREA rows="3" name="commentaires">
	Tapez ici vos commentaires</TEXTAREA>
	</TD>
</TR>

<TR>
	<TD COLSPAN=2>
	<INPUT type="submit" value="Envoyer">
	</TD>
</TR>
</TABLE>
</FORM>

Hier das Resultat dieser HTML-Codierung

Eintragung eines Benutzers

name
Vorname
Geschlecht	Mann: Frau:
Funktion	Lehrer Student Ingenieur Rentner Sonstiges
Kommentare	Geben Sie hier Ihre Kommentare ein

Attribute des Kennzeichens FORM und Eingabetypen

Kennzeichen	Attribut	Wert	Ergebnis	optischer Effekt
<FORM> ... </FORM>	METHOD	POST GET
	ACTION		sendet an die angegebene Adresse
	ENCTYPE		gibt den verwendeten Codierungstyp an
<INPUT>	TYPE	submit	effectue l'ACTION dans le balise <FORM>
		text	einfache Zeile deren Länge durch das Attribut size vorgegeben ist
		reset	löscht den Inhalt des Formulars
		radio	radio-Knopf
		checkbox	anzukreuzendes Feld
	NAME		Name
	SIZE		Umfang des Textes
<TEXTAREA> ... </TEXTAREA>	NAME		Textzone
	ROWS
	COLS
<SELECT> <OPTION> ... </OPTION> </SELECT>	NAME			Wahl 1 Wahl 2 Wahl 3 Wahl 4
	MULTIPLE		mehrere Auswahlen möglich	Wahl 1 Wahl 2 Wahl 3 Wahl 4
<OPTION> ... </OPTION>	SELECTED	Standardmässige Vorgabe		Wahl 1 Wahl 2 Wahl 3 Wahl 4
	VALUE	erzwungene Wert