Formulare

Das wird auch wieder ein komplexeres Thema :-)
Formulare dienen hauptsächlich der Sammlung von Daten, wie Anmeldungen, Bestellungen oder Zahlungen. Selbst Suchmaschinen sind eine Art von Formular.
Diese Daten, die in vorgegebenen Felder einzutragen sind, können dann abgesendet werden und müssen dann mit speziellen Programmen auf einem Server verarbeitet werden. Man kann sich jedoch auch die Daten per E-Mail zusenden lassen (z.B. Bestellen eines Zubringerdienstes). Für Anwender, die keinen Zugriff auf CGI-Skripte haben und sich mit der Programmierung und Einrichtung solcher Skripte nicht auskennen oder sich vielviel später auseinandersetzen wollen, gibt es einen guten Ausweg - die sogenannten Formmailer. Diese Server übernehmen die Daten und senden sie verabeitet als Email zurück. Ein kostenloses Beispiel kann man hier anschauen:

Aber Nichts desto Trotz zuerst einmal ein Beispiel: Tell-A-Friend

Ein Formular festlegen

Alles was zwischen den Tags <form>......</form> steht ist Bestandteil des Formulares, wie z.B. Eingabefelder, Listen und Buttons. Innerhalb der beiden Tags sind jedoch auch erklärende Texte, Grafiken, Tabellen u.s.w. erlaubt. Die einzelnen Elemente werden dann mit Absätzen (<p>) und Zeilenumbrüche (<br>) im Formular verteilt.
Dabei ist jedoch folgendes zu beachten: In der HTML-Art "Strict" (neue Art mit CSS-Angaben)dürfen in einem Formular nur sogenannte Blockelemente verwendet werden, so wie Überschriften (h1), Absätze (p), Bereiche (div) oder Tabellen. In der HTML-Art "Transitional" (Kompromiss-Art mit keinem bzw. etwas CSS) ist es auch möglich sogenannte Inline-Elemente abzubringen (br, font etc). In der Strict-HTML kann man sich behelfen, dass man ein Blockelement setzt: <form><div>  </div></form>. Für genauere Infos zu dieser Seite surfen.

a. Email-Formular

<form action="mailto:alfxxxx@yahoo.de" method=post enctype="text/plain">
... Elemente des Formulars wie Eingabefelder, Auswahllisten, Buttons usw. ...
</form>
Um die daten zu einem Formmailer zu übermitteln würde die Angabe mailto:alfxxxx@yahoo.de durch http://send.formmailer.com/ ersetzt werden (Url laut Angabe des jeweiligen Anbieters).

b. Datenverarbeitungs-Formular

<form action="/cgi-bin/auswertung.pl" method=get>
... Elemente des Formulars wie Eingabefelder, Auswahllisten, Buttons usw. ...
</form>

Mit dem Attribut action= im Einleitungstag <form> wird dann angegeben was mit den Daten geschehen soll.
Mit action=mailto:alfxxxx@yahoo.de werden die Daten an diese Mail-Adresse gesendet. Um Daten auf einem Server zu berechnen wird action="CGI-Programm aufrufen" aufgerufen (siehe Beispiel)

Als nächstes müssen die Übertragunsmethoden angegeben werden. Es gibt zwei Arten, die mir aber noch etwas schleierhaft sind.

method=get
method=post

Die method=get dient der Übermittlung von Daten. Wenn man Formulardaten mit E-Mail übermittel, benutzt man immer method=post. Außerdem soll man dann die Angabe enctype="text/plain" mit angeben. Dadurch erhaltet man die Daten in einem formatierten Email.

Einzeilige Eingabefelder

a. Grundlage


    <form action="http://www.formmailer.com" method="post">
      <p>Name: <input name="Name" type=text
          size=20 maxlength=20></p>
      <p>Sternzeichen: name="Sternzeichen" <input type=text
          size=15 maxlength=20></p>
    </form>

Nach dem Namen des Eingabefeldes wird dieses mit <input> definiert. Mit dem Attribut <name=> wird ein interne Bezeichnung vergeben - dient zur Datenverarbeitung. Diese Bezeichnung soll kurz sein, keine Leerzeichen und Umlaute aufweisen. Die sichtbare Länge des Eingabefeldes und die interne Länge wird mit <size=> und <maxlength=> vorgegeben. Wenn die maximale Zeichenmenge größer als das Feld ist werden die Buchstaben verschoben.

b. Formular in blinder Tabelle

Das obige Beispiel mit einer blinden Tabelle formatiert, also kein Attribut border oder border="0".

c. Textvorbelegung

Durch das zusätzlich Attribut value= (value=Wert) wird das Feld mit einem Text vorbelegt. Dieser Text kann überschrieben werden.
<p>Name: <input name="Name" type=text size=20 maxlength=20 value="Vor- oder Zuname"></p>

Passwortfelder

Dies sind die Felder die an Stelle der Buchstaben kleine Sternchen wiedergeben. Jedoch wird das Passwort im Klartext übermittelt. Es ist also keine Verschlüsselung.


  <form action="input_password.htm">
  <p>Passwort:<br>
  <input name="kennwort" type="password" size="12" maxlength="12"></p>
  </form>

Wie ersichtlich wird das Passwortfeld durch type="passwort" bestimmt.

Mehrzeilige Eingabe

Für Kommentar, Nachrichte also längere Texte gibt es natürlich auch was.

Kurz Nachdenken


   <h3>Kurz Nachdenken</h3>

   <form action="http://www.formmailer.com">
   <p>Wofür kann man Formulare brauchen:<br>
   <textarea name="user_eingabe" cols="30" rows="5"></textarea>
   </p>
   </form>

(textarea = Textbereich; rows = Zeilen; cols = columns = Spalten)

Ein mehrzeiliges Eingabefeld, welches auch einen internen Bezeichnernamen mit der Angabe name= haben muss, wird durch textarea bestimmt. Mit rows= werden die sichtbaren Zeilen und cols= die Anzahl der Zeichen/Zeile festgelegt. Vielleicht löste das Wort "sichtbar" Verwunderung aus. Nun man kann unendlich viel Text in so ein Feld schreiben - wenn dieser nicht mehr ins Feld passt entsteht ein Scrollbalken.

Anmerkung: Eines noch: nicht auf den Endtag </textarea> vergessen.

Auch bei mehrzeligen Feldern kann man einen Text ins Eingabefeld vorgeben. Den gewünschten Text bringt man nach dem Einleitungstag <textarea name="user_eingabe" cols="30" rows="5"´> und dem Endtag </textarea> unter.

Eher selten wird man es benötogen, dass in ein Feld ein Text kommt, der nur gelesen werden kann. Dazu verwendet man das Attribut readonly.

<textarea name="user_eingabe" cols="30" rows="5" "readonly">Hier kommt dann der Text....!</textarea>

Auswahllisten

a. Variationen

Mit dem Attribut <select....> wird eine Auswalliste begonnen. Eine solche Liste soll einen internen Bezeichnernamen erhalten mit dem Attribut name=. Da, wie bereits erwähnt, die Verarbeitung solcher Daten auf einem Server mit entsprechenden Programmen durchgeführt wird, ist es am Besten die Schreibweise dieses Wortes entsprechend einem UNIX-Rechner-Regeln zu wählen. Der Beginn muss ein Buchstabe sein. Dann sind Zahlen erlaubt. Als Sonderzeichen ist am BEsten nur das "_" zu verwenden.
Durch size= wird die Anzahl der sichtbaren Stellen festgelegt; sind es mehr dann wird automatisch ein Scrollbalken dargestellt.

Anmerkung: Bei size=1 wird eine Dropdownlist erzeugt.

Mit <option>...</option> werden dann die Auswahlwörter eingegeben; dren Zahl ist unendlich. Leider ist diese Variante für den Betrachter nicht ersichtlich - daher sollte man darauf hinweisen.

Zwei Erweiterungen gibt es noch. Zum einen kann man mit dem Attribut "multiple" in der select-Tag die Auswahl mehrerer Werte vorsehen, zum Anderen kann man mit dem Attribut "selected" im option-Tag einen oder mehrere Begriffe vorwählen. Deise Vorwahl ist aber nicht bindend.

Wählen Sie kein Attribut

Mehrere Dinge Wählen multiple

Vorwahl selected


  <form action="select.htm">
  <p>
  <select name="top5" size="5" multiple>
  <option>rot</option>
  <option>blau</option>
  <option selected>gelb</option>
  <option>weiß</option>
  <option>schwarz</option>
  </select>
  </p>
  </form>

Anmerkung: Die XHTML-konforme Notation ist in der Form multiple="multiple" bzw. selected="selected" vorzunehmen. Bei dem Mehrfach-Auswahl hab ich das vorgenommen. Ein Unterschied ist nicht feststellbar.

b. Absendewert von Einträgen bestimmen

Manchmal kann es notwendig sein das Auswahlwort mit einem anderen Wert an den Server zu übermitteln. Also man hat z.B. eine Ersatzteildatei, wobei die Ersatzteile eigene Kennzahlen haben. Es wird als nicht das angeklickte Wort "Keilriemen" übermittelt, sondern die für die Ersatzteildatei notwendige Kennziffer. Das erreicht man damit, dass man in den Einleitungs-Tag <option> das Attribut"value=" (value= Wert) samt einem Wert einfügt.

Beispiel:
<option value="KR1">Keilriemen</option> oder
<option value="Pblau">Pumpe</option>

c. Verschachtelte Auswahllisten

Eine Möglichkeit gibt es noch - die Auswahlliste als Menue darzustellen.
Dazu wird innerhalb des <select>.....</select>-Tags ist für jede vorgesehene Untergruppe der <optgroup>...</optgroup>-Tag eingefügt und zwar mit dem Attribut label=. Innerhalb diesem werden dann die einzelnen Worte innerhalb eines <option label="Pumpe">Pumpe</option>-Tag eingetragen.
Ich glaub da mach ma (machen wir) ein Beispiel!

Ihr bevorzugter Browser


<form action="select_optgroup.htm">
<p>Zur Auswahl stehen:</p>
<p>
<select name="Namen" size=2>
 <optgroup label="Windows">
  <option label="MS-IExplorer">MS-IExplorer</option>
  <option label="Opus 6.1">Opus 6.1</option>
  <option label="Sturmbrowser">Sturmbrowser</option>
 </optgroup>
 <optgroup label="Linux">
  <option label="Opus 6.0">Opus 6.0</option>
  <option label="Star-Office">Star-Office</option>
  <option label="Überdrüber">Überdrüber</option>
 </optgroup>
 </select>
</p>
</form>

Anmerkung: Die Werte, die Sie hinter <option> notieren, sind für die Menüdarstellung nicht wichtig. Man soll sie jedioch notieren, weil Browser, die Menüs nicht darstellen können, stattdessen eine Auswahlliste mit den Einträgen, die Sie hinter den <option>-Tags angeben, anzeigen.

Auswahl durch Kennzeichen

Gemeint ist die auswahl durch ein Hakerl oder einem Punkt. Dazu gibt es im HTML zwei Möglichkeiten:

Radiopbuttons (runde Felder in die man einen Punkt machen kann)
Checkboxen (Quadrate in die ein Hakerl kommt)

Der Unterschied ist, dass man beim Radiobutton immer nur einen auswählen kann, während dessen bei Checkboxen die Anzahl egal ist. Sogar Null ist möglich.
Das bereits weiter oben gesagte über den internen Bezeichnernamen (name= und dem Attribut für die Wertzuweisung ( value=) gilt auch hier.

a. Radiobutton


<form action="input_radio.htm">
<p><b>Bevorzugte Haarfarbe</b></p>
<p>
<input type="radio" name="Haarfarbe" value="rot"> rotgetupft<br>
<input type="radio" name="Haarfarbe" value="blau"> blaugesprenkelt<br>
<input type="radio" name="Haarfarbe" value="gelb"> gelbgebleicht
</p>
</form>

b. Checkboxen


<form action="input_checkbox.htm">
<p><b>Was essen Sie gerne?</b></p>
<p>
<input type="checkbox" name="zutat" value="Pala"> Palatschinken<br>
<input type="checkbox" name="zutat" value="Fasch"> Faschierte Laberln<br>
<input type="checkbox" name="zutat" value="Tafel"> Tafelspitz
</p>
</form>

Name:
Sternzeichen: