Formulare - Workshop am 12.11.99

Formular testen

Zum Testen eines Formular kann "http://www.neusob.de/ak-inhalt/reflektor.asp" verwendet werden. Ein Beispiel zum Ausprobieren finden Sie hier. Diese Seite macht nichts besonderes. Sie zeigt letztlich nur an, welche Daten wie an den Server übergeben wurden. Das dazu passende Form-Tag sollte wie folgt aussehen.

<form method="POST" action="http://www.neusob.de/ak-inhalt/reflektor.asp">

Was gibt es da zu Testen? Alle Werte kommen als "Name-Value Pair" an. Falls Sie die Daten per Email erhalten, werden Sie von Menschen "weiterverarbeitet" und sollten daher menschenlesbar sein. Werden die Daten von einem Programm weiterverarbeitet, schadet es auch nicht, wenn die Daten eindeutig definiert werden, um dem Programmierer das Leben klarer zu machen.

Wie der Name sagt, erhalten Sie die Daten in der Form

Name1 = Wert1(Value1)

wobei Sie beides (Name- und Value Attribut) vorher bei den Eingabeelementen festgelegt haben. Bei normalen Textfeldern erwarten Sie keine Spezialitäten. Anders kann dies bei den runden Radio-Buttons und den viereckigen Checkboxen aussehen. Natürlich können Sie als Value 1 oder 0 angeben, aber sehen Sie selbst welche Meldung Sie erhalten möchten

• Pizza=Tonno oder Pizza=23
• Durchmesser=1 oder Durchmesser=16cm oder Durchmesser=normal
• Beilage=1 oder Beilage1=Pepperoni

Von daher, experimentieren Sie mit beiden: dem Name- und dem Value-Attribut bei der Festlegung der Formularelemente und testen Sie die Dinge durch. Tippfehler haben sich leicht eingeschlichen und wären doch schnell zu korrigieren.

Einige Tricks

Validierung

Per Scriptsprache kann ein Formular vor dem Absenden validiert (überprüft) werden. Da der Anwender die Scriptfähigkeit seines Browsers abschalten kann, ist diese Methode nicht garantiert. Umsomehr ist es angebracht die Überprüfung nicht zu überziehen - so manches schlechte Beispiel gibt es dazu im Netz. Es ist etwa eine ganz einfache Übung nach der Überprüfung eines Formularelements (Beispiel: Name nicht angegeben) den Cursor auf genau dieses Feld zu setzen, so daß der Anwender nicht noch lange rumklicken oder suchen muss.

Scripting bedeutet programmieren, was den Rahmen dieser Seiten sprengt. Ein Beispiel mit ersten Anregungen und zum Abkupfern finden sie auf der Rückmeldeseite der Webmaster.

 

Verweise

Wenn das Prinzip eines Formulars einmal klar ist, werden Sie sehen, daß auch andere mit dem gleichen Wasser kochen und Sie viele praktische Anwendungen im Netz in Ihre Seiten einbinden können. Eine eigene Suche im WWW auf Ihrer Homepage? Kein Problem - sagen Sie der Suchmaschine nur was und wo sie suchen soll! Eine Anfahrtsskizze zu Ihrer Stadt? Kein Problem, das gibt es alles öffentlich zu haben! Beispiele, wie das Aussehen kann, sind auf den Karlskroner-Suchseiten zu finden.

Ein Ausschnitt dazu: Routenplaner mit Web.de (die Farben diesmal anders gewählt, um die reinen Formularelemente im HTML Gewusel hervorzuheben).

<form Target="Rechts" ACTION="http://route.web.de/Europa/">
  <input type="hidden" name="doit.x" value="x">
  <input type="hidden" name="ToNr" value>
  <input type="hidden" name="To" value="Karlskron 85123">
  <table BORDER="1" CELLPADDING="6" CELLSPACING="0">
    <tr BGCOLOR="FFFFCC">
      <td ALIGN="CENTER"><font FACE="ARIAL" SIZE="-1"><b>WEB.DE Routenplanung:</b>
        Ihr Weg nach <b>Karlskron</b></font>
      </td>
    </tr>
    <tr BGCOLOR="EEEEEE">
      <td>
        <table BORDER="0" CELLPADDING="0" CELLSPACING="0">
          <tr>
            <td ALIGN="CENTER"><font FACE="ARIAL" SIZE="-1">Abfahrtsort eingeben
             <input TYPE="TEXT" NAME="From" SIZE="16">&nbsp;und&nbsp;</font>
            </td>
            <td ALIGN="CENTER">
             <input TYPE="image" SRC="napping.gif" WIDTH="144" HEIGHT="40" BORDER="0"
             ALT="Routenplanung starten">
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</form>

 

Script auf Buttons, Grafiken, etc.

Und jetzt die Ausnahmen: Formularelemente müssen nicht immer dem hier gezeigtem Schema folgen. Aktionen können per Script auch vom Browser gesteuert werden. Anbei ein Beispiel aus SelfHTML. Dieses Beispiel setzt voraus, daß der Anwender Scripting nicht ausgeschalten hat.

<form>
   <input type="button"
          value="Zurück"
          onClick="history.back()">
</form>

---

 

Verwendung von Frontpage

Die Forms lassen sich wunderbar über FP gestalten. Nachteil: die schöne Formatierung, wie in den Beispielen gezeigt, geht verloren. Teilweise Abhilfe: markieren Sie zuerst das Form-Element bevor Sie in die HTML-Ansicht wechseln. Dann ist gleich das passende markiert. Falls Sie hidden Tags suchen: die wandern an den Anfang des Formulars (unterhalb von <form>).

Manchmal müssen und sollten Sie "Hand anlegen". Das Title-Attribut wird zum Beispiel nicht unterstützt. Oder helfen Sie FP auf die Sprünge beim Form-Tag oder dem Encryption-Attribut.

 

Weiterführende Links

Das Standardwerk der HTML-Syntax, SelfHTML von Stefan Münz, haben Sie als Web-Author bestimmt schon auf Ihren Rechner geladen. Die Webseite ist übrigens sehr empfehlenswert, weil sich dort u.a. viele weitere praktische Tips finden.

 

Schlussbemerkung

Falls Ihnen diese Seiten etwas geholfen haben, würde ich mich über eine kleine Rückmeldung per Mail freuen. Sollten Ihnen Fehler auffallen um so mehr.