Formulare

Themen: Formular "gründen"
Steuerelemente auf Formularen
Eingabeelemente
Übersicht der <input>-Typen
Mehrzeiliges Eingabefeld
Listenfeld
Formulare auswerten
Formulartest / Meinungsäußerung zum Kurs

Formular "gründen" Wozu man Formulare braucht? Weiß ich auch nicht, aber mancher meint sie eben zu brauchen.
Formulare werden mit dem Tag <form> definiert bzw. erzeugt. Allerdings bleiben sie ohne Attribute so unexistent, wie man sich Formulare nur wünschen kann. Die für die Anlage eines Formulars erforderlichen Attribute legen vorab fest, was mit den Angaben, die das Formular einsammelt, passieren soll. Wenn das Formular nur intern zu verarbeitende Daten sammelt, können die Attribute zum <form>-Tag auch entfallen.

Attribut	Bedeutung
`action="URL"`	Art der Verarbeitung der Daten. Üblich sind Verschickung per E-Mail oder Aufruf eines CGI-Scripts zur Verarbeitung
`method="post/get"`	In welche Richtung sollen die Daten bewegt werden? "`post`" bedeutet Senden, "`get`" Datenempfang (von einem CGI-Programm)
`enctype="plain/text"`	Art der Verschlüsselung bzw. Übertragung, MIME-Typ
`name="mein_Formular"`	Formularname, erforderlich, wenn auf das Formular mittels JavaScript-Code zugegriffen werden soll
`target="fenstername"`	bei Verwendung von Frames wird das Fenster ausgewählt, in das hinein Ergebnisse von "action" geschrieben werden. Namen sind die der vorhandenen Fenster oder die voreingestellten "`_blank`", "`_self`", "`_top`", "`_parent`". Man sehe bei Frames nach.

Die Definition eines Formulars zum Einsammeln und Verschicken von Daten würde also etwa so aussehen:
<form action="mailto:myadress@myprov.de" method="post" enctype="text/plain">

</form> Der Abschickbefehl wird allerdings nur dann ausgeführt, wenn der Browser das prinzipiell kann und der E-Mail-Client ordnungsgemäß eingerichtet ist. Damit das Formular ein Formular wird, muß noch etwas geschehen, das Formular muß Steuerelemente erhalten.

Steuerelemente auf Formularen: Es gibt formal geredet genau drei Formular-Steuerelemente, nämlich Input-Elemente bzw. "Eingabefelder", "Textareas", die der Eingabe von längeren Texten dienen aber nicht zu den Eingabefeldern zählen, und "Listenfelder", in denen man aus einer -was wohl?- richtig, einer Liste auswählt. Warum man Textareas nicht der Vielzahl der Input-Elemente hat zuschlagen können, verbirgt sich mir ebenso, wie die Frage, warum Auswahl aus einem Wahlangebot von Radio-Buttons eine Eingabe, aus einer Liste dagegen keine Eingabe sein soll.
Dabei ist doch HTML gar nicht von Microsoft erfunden worden!

Eingabefelder Tag <input>, ohne schließendes Tag
Das universelle Eingabefeld nimmt Klick-, Text- oder Zahleneingaben des Nutzers an. Angelegt wird es durch das <input>-Tag. Wie es aussieht und reagiert, wird mit Attributen festgelegt, die wie immer in der öffnenden Tag-Klammer angegeben werden müssen/können. Um die Anordnung des Eingabefeldes auf dem Formular muß sich der Seitenkomponist allerdings auch kümmern. Eingabefelder können wie alle anderen Elemente der Seite Eingabefelder können wie alle anderen Elemente der Seite
* wie Fließtext behandelt werden; was von allein geschieht, wenn man sich um die Anordnung nicht kümmert, was ... aussieht, oder
* man nutzt die üblichen Möglichkeiten der Anordnung z.B. mit dem <center>-Tag oder mit <div align=right/left> ...</div>
* man baut sie zur örtlichen Fixierung in Tabellen oder Listen ein.

Attribut	Bedeutung
`type="typkennung"`	vgl. Tabelle unten
`size="n"`	bei `typ="text"` Länge des angezeigten Eingabefeldes
`maxlength="m"`	bei `typ="text"` Länge des möglichen Textes
`name="feldname"`	Name der Variablen, die nach Eingabe das Ergebnis enthält, ist für die Auswertung nötig!
`value="vorgabewert"`	bei Formularstart gezeigter Text, muß vor dem Schreiben gelöscht werden! Buttonbeschriftung
`tabindex="n"`	Tabulatorreihenfolge festlegen, mit dem Tabulator kann man in der Reihenfolge dieser Nummern die Felder wechseln

Übersicht der <input>-Typen

`type="text"`	ist soweit klar; Schriftart, -größe, -farbe können mit dem `<font>`-Tag oder mit Hilfe von Styles verändert werden. Textfelder werden gerne auch zur Anzeige "mißbraucht".	Name:
`type="password"`	auch klar	Kennung:
`type="checkbox"`	dito	zufrieden? sehr?
`type="radio"`	müssen zur gegenseitigen Verriegelung gleiche Namen erhalten, Vorwahl mit "`checked=true`"	Ja Nein
`type="button"`	Allzwecktaste, Beschriftung mit "`value`" angeben
`type="submit"`	veranlaßt das Senden
`type="image"`	tut das gleiche, aber mit zu ladendem, anzuklickendem Bild
`type="file"`	Dateiauswahlfeld
`type="reset"`	setzt das ganze Formular zurück, mit "`value`" kann die Aufschrift verändert werden
`type="hidden"`	ermöglicht das Verstecken von Informationen, die mit versandt werden sollen

Beim Versenden des Formulars werden im E-Mail in der Reihenfolge der Formularelemente Zeilen der Form: "Name des Formularelements=value" angelegt.
Dabei ist value der jeweilige Eintrag bzw. für Radio-Buttons der vorab vergebene value-Wert des ausgewählten Knopfs. Wenn man die Namen der Fomularelemente entsprechend vergibt, entsteht Klartext, der ohne weitere Probleme auswertbar ist.

Mehrzeiliges Eingabefeld:
Textarea Tag: <textarea>....</textarea>
Für die Eingabe längerer Texte, wie Briefe, komplette Anschriften etc. ist das Input-Feld vom Typ "text" nicht geeignet. Mit dem Tag <textarea> wird Abhilfe geschaffen. Es hat wieder eine Reihe von Attributen, für die jeweils bei fehlender Angabe mehr oder wenige sinnvolle Default-Werte gelten. Nötig ist wieder für die spätere Auswertung der Name des Feldes.

Attribut	Bedeutung
`name="mein_Textfeldname"`	unter diesem Namen wird später der eingetragene Text gespeichert
`rows="n"`	Zahl der reservierten Zeilen, bestimmt die Fensterhöhe
`cols="m"`	Zahl der Zeichen in der Zeile, bestimmt die Fensterbreite
`wrap="off/physical/virtual"`	Zeilenumbrüche: ohne, echt, nur im Browserfenster
`tabindex="n"`	Tabulatorreihenfolge festlegen

Wie das gute Stück aussieht? Versuchen wir:
<form>
<textarea name="versuch" rows="5" cols="40" wrap="off">meine textvorgabe</textarea>
</form>
Hier das Ergebnis:
meine Textvorgabe

Listenfeld Tag <select>...</select> + <option>
Für die Auswahl unter mehreren Möglichkeiten gibt es das Auswahl- oder Listenfeld, ähnlich einfach einzurichten wie die anderen Steuerelemente. Die Einträge erfolgen mit dem <option>-Tag über das Attribut value. Beispiel folgt unten. Die einzelnen Attribute sind

Attribute zu `<select>`	Bedeutung
`name="feldname"`	wird für die Auswertung benötigt
`size="n"`	Zahl der gleichzeitig angezeigten Einträge, das Fenster wird je nach Notwendigkeit mit Rollbalken oder als Drop-Down-Feld dargestellt.
`multiple`	ermöglicht Mehrfachauswahl
`tabindex="n"`	Tabulatorreihenfolge festlegen
Attribute zu `<option>`
`value="listenwert"`	alle Listeneinträge erhalten einen Wertbezeichnung, der angezeigte Text folgt auf das öffnende Tag.
`selected`	kennzeichnet den bei Öffnung vorgewählten Eintrag

Hier ein Beispiel

<form>
   <select name="test" size="1">
      <option value=1>Äpfel
      <option value=2>Birnen
      <option value=3 selected>Pflaumen
   </select>
<form>

Formulare auswerten

Solange man beim reinen HTML bleibt, sind Formulare ebenso leicht ausgewertet wie angelegt. Dafür hat man aber nur wenige Möglichkeiten.
Viel mehr Möglichkeiten hat man allerdings, wenn man mindestens JavaScript einsetzt. Für alle Steuerelemente können nämlich Ereignisse wie "onfocus" (die Maus hat das Steuerelement erreicht), "onchange" etc. ausgewertet werden, die dann die Abarbeitung eines "Scripts", also einer Programmroutine starten.
Trotzdem hat es Sinn, die Möglichkeiten von Formularen innerhalb von HTML zu nutzen:

Angaben von Lesern lassen sich leicht empfangen. Die Verschickung der Formulareinträge funktioniert wie oben gezeigt "automatisch". Die Auswertung kann "von Hand" erfolgen und erfordert dann keine weiteren Kenntnisse

Mit dem speziellen Protokoll CGI (Common Gateway Interface) können Formulareingaben des Nutzers als Argumente an ein Programm des Servers übergeben werden, welches seine Ergebnisse an den Nutzer zurückschickt.

Formulartest / Meinungsäußerung zum Kurs Hier folgt ein Testformular, das Wünsche an den Autor des Kurses übermittelt. Wenn Sie Ihre korrekte E-Mail-Adresse angeben, erhalten Sie per E-Mail eine Kopie dieses Schreibens. Daran können Sie überprüfen, was bei der Formularauswertung über Sie offenbart wird. Wenn Sie das nicht wollen, einfach die Adressangabe weglassen. Das Absenden einer Kopie an Ihre, eben erst eingetippte Adresse geht mit HTML allein nicht. Deshalb ist hier JavaScript eingearbeitet. Auf die mit JavaScript ebenfalls mögliche Testung der Einträge habe ich hier allerdings verzichtet.

Formulare

Test bzw. Anregungen zum Kurs