Mathe und Info

Seite

Form-Design

Sinn und Zweck

Formulare gibt es im Web an vielen Stellen. Der Benutzer soll Eingaben in das Formular machen und die Daten an den Server schicken.
Ebenso wie bei "normalen" Programmen ist der Benutzer dabei eine bestimmte Vorgehensweise gewohnt und man soll das Aussehen des Formulars so aufbauen, wie man es gewohnt ist.

Beispiel

Hier sehen wir zwei Formular, die beide vom Benutzer Eingaben erwarten:

[Grafik1] [Grafik[2]

Wenn wir die beiden Formulare vergleichen, dann fällt auf, dass beide Formular genau diesselben Eingabefelder enthalten, aber im Handling total unterschiedlich sind.
Auf der rechten Seite ist es sehr einfach zu erkennen, was eingegeben werden soll, während auf der linken Seite die Formatierung das Formular unübersichtlich macht und auch die unterschiedliche Reihenfolge der Steuerelemente die Eingabe erschwert.

Man kann aus dem obigen Beispiel ein paar Grundregeln für das Gestalten von Websites ableiten:

Gestaltungsregeln für Web-Formulare

In dem obigen Beispiel haben wir uns kurz angeschaut, wie schlecht formatierte Formulare aussehen.
Damit wir auch vernünftige und gut-aussehende Dialoge bauen können sollte man die folgenden Regeln beachten:

Eingabefelder untereinander anordnen
Untereinanderliegende Eingabefelder auf gleiche Größe formatieren
Zusammenhängende Radio oder Checkboxes durch einen Rahmen kennzeichnen
Größe des Formulars immer so anpassen, dass der Benutzer nicht scrollen muss.
Jedes Eingabefeld hat eine Beschreibung, was überhaupt eingeben werden soll

Zusätzlich gelten sowohl bei Webformularen, als auch bei normalen Dialogen/Formularen in C++ bzw. VB die Gestaltungsregeln für Bildschirmmasken. (todo:Link einbauen) Damit sind also die Regeln für Sequentialität, Proportionalität, Balance sowie virtuelle Linien gemeint. (Unterrichtsinhalte aus Visual Basic / AE2)

Damit die anschließende Auswertung von Formularen (siehe auch PHP-Kurs) möglichst einfach wird, muss man sich bei der Benennung der Steuerelemente an gewisse Regeln halten.

Benennungsregeln von Steuerelementen

Ebenso wie in Visual Basic müssen Steuerelemente eindeutig benannt sein. Gemeinsam mit den anderen Kollegen haben wir uns auf eine einheitliche Benennung (d.h. entsprechendes Präfix) der Steuerelemente geeinigt:

txt = einzeilige Textfelder (type="text")
sel = Dropdown-Box (<select>)
btn = Formular Buttons (type="input", type="reset")
chk = Checkboxen (type="checkbox")
opt = Radiobutton / Optionbutton (type="radio")

Zusätzlich sind für die Formular-Buttons "input" und "reset" folgende feste Bezeichnung zu verwenden:

btnSubmit heißt immer der Formularbutton zum Absenden (type="submit")
btnReset heißt immer der Reset-Button (type="reset")

Beschriftung von Steuerelementen mit Labels

Aus anderen Programmiersprachen kennt man das Steuerelemente Label. Mit diesem Steuerelement kann man einen Beschriftungstext erzeugen.

Auch in HTML gibt es ein label-Tag, mit dem kann man eine Beschriftung eines Buttons erzeugen. Allerdings hat diese Label keine besondere Darstellung, diese kann dann über Styles definiert werden.

Syntax des Label Elementes:

Das Label Element sieht wie folgt aus:

<label for="Name_des_Steuerelements"> Beschriftung </label>

Dieses Label hat keine besondere Darstellung (außer man formatiert es über einen CSS-Style". Wozu braucht man das Label also?
Das Label ist für andere Programme hilfreich, die die Website analysieren. Diese Programme können anhand der Labels unterscheiden, was Inhalt und was nur Beschriftung auf einem Formular ist.

Infoblätter und Arbeitsblätter

Komplexere Formulare gestalten
Info: Dieses Arbeitsblatt enhält weitergehende Formulare, die auf Websites benötigt werden. Dabei werden verschiedene Steuerelemente verwendet. Insgesamt soll hieran geübt werden Elemente anzuordnen und korrekt zu benennen.