Syntax.at

HTML Grundkurs

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.

AttributBedeutung
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“>
 <!– jetzt kommen die Tags, die das Formular mit Steuerelementen füllen –>
</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.

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.
AttributBedeutung
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 klarKennung: 
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.

AttributBedeutung
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

 
Beispielcode:

<form>
<textarea name=“versuch“ rows=“5″ cols=“40″ wrap=“off“>meine textvorgabe</textarea>
</form>

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.
multipleermö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.
selectedkennzeichnet den bei Öffnung vorgewählten Eintrag

 
Beispielcode:

<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.

Test bzw. Anregungen zum Kurs

Mein Name:
E-Mail-Adresse:
Ich finde den HTML-Kurs:
schlecht 

weiß nicht 

gut
Was ich mir noch wünsche:

 

  • Syntax.at
    • HTML – Einleitung
    • Links in html
      • Links in Protokollen
    • Gliederung und Formatierung von Text
      • Die Verwendung von Farben
      • Wozu Listen?
      • Grundaufbau einer Tabelle
    • Linien und Grafiken
    • Was sind Frames?
    • Formular „gründen“
    • Musik „im Hintergrund“
    • Einbindung von Java-Applets
    • Hintergrundinformationen mit dem meta-Tag
[Nach oben] Impressum und Datenschutzerklärung