brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]

Formulare in HTML-4

von Thomas Salvador.

Teil 1

In diesem letzten Teil besprechen wir Auswahllisten und die Kommandos.

Auswahllisten
- Einfache Auswahl
- Mehrfache Auswahl
Kommandos

Während die Auswahlboxen alle Möglichkeiten anzeigen, zeigt die Auswahlliste jeweils nur einen Ausschnitt an. Ansonsten sind Box und Liste in gewisser Form äquivalent, in der einfachen Auswahl ist eine Option zu wählen, in der mehrfachen Auswahl können entsprechend mehrere Optionen selektiert werden.

Die gesamte Liste wird durch den select-Tag gekapselt, der das übliche Attribute name haben muß. Darüber hinaus kann über das size-Attribut festgelegt werden, wieviele Einträge (hier Optionen genannt) angezeigt werden sollen. Ist die tatsächliche Anzahl von Einträgen größer als der so eingestellte Wert, so kann der Benutzer durch die Liste von Optionen scrollen.

Die einzelnen Optionen werden durch den option-Tag gekapselt, dem als Attribut value die Identifikation der Option mitgegeben wird. Wird value fortgelassen (was der Autor ausdrücklich nicht empfiehlt), so wird die Bezeichnung als Wert geliefert, die in diesem Fall aus genau einem Wort bestehen muss.

Schließlich kann eine Option mittels selected vorselektiert werden. Fehlt eine solche Angabe, so ist die erste Option vorselektiert.

Beispiel:

<form method="post" action="irgendwas">
Mit welchem Prozessor ist Ihr Rechner ausgestattet?
<select name="cpu" size="3">
  <option value="cpu0"> 8086 </option>
  <option value="cpu1"> 80186 </option>
  <option value="cpu2" selected="selected"> 80286 </option>
  <option value="cpu3"> 80386 </option>
  <option value="cpu4"> 80486 </option>
  <option value="cpu5"> Pentium </option>
  <option value="cpu6"> anderer </option>
</select>
</form>

liefert

Ausgabe auf Ihrem Browser

Sie sehen hier, dass der Autor die Optionen schlicht und ergreifend durchnummeriert: einfach und effektiv. Im Beispiel werden drei Optionen untereinander angezeigt, 80286 ist vorselektiert. Es tritt hier das gleiche Problem auf, wie bei den mehrzeiligen Eingabefeldern. Es lässt sich auch genauso lösen.

Der Autor bevorzugt i.a. size="1". (In diesem Falle kann size auch weggelassen werden.) Damit wird ein Pulldown-Menü erzeugt. Lassen wir im gerade betrachteten Beispiel die Größenangabe weg, so erhalten wir

Ausgabe auf Ihrem Browser

Man hat hier also schon eine gewisse Gestaltungsfreiheit.

Mehrfache Auswahl

Die mehrfache Auswahl wird völlig analog zur einfachen Auswahl gesetzt. Der select-Tag wird lediglich um das Flag multiple erweitert.

Beispiel:

...
<select name="os" size="3" multiple="multiple">
...

Fügen wir bei den Beispielen zur einfachen Auswahl multiple hinzu, so erwalten wir

Ausgabe auf Ihrem Browser

bzw.

Ausgabe auf Ihrem Browser

Beim letzteren sieht man, dass wir hier das Pulldown-Menü nicht einsetzen können. Wird size nicht angegeben, so werden alle Optionen gezeigt. (Funktioniert nur beim Navigator, der IE zeigt nur 4 Einträge). Geben wir size=1 an, so ist die Ausgabe zwar nur eine Zeile hoch, damit kann man aber i.a. nicht übersichtlich auswählen.

In beiden Beispielen bieten sich wieder Tabellen an, um ein "hübschere" Formatierung zu erreichen.

Kommandos

Kommando-Button

Bisher hatten wir immer action="irgendwas" gesetzt. Dies lag daran, dass wir die Formulare nur editieren, aber nicht versenden konnten. Hierfür sind die Kommandos zuständig, von denen es als spezielle Typen des input-Tags zwei gibt:

<input type="submit" value="OK" />

erzeugt einen Kommandobutton mit dem angegebenen Wert als Bezeichnung (hier: OK). Das Anklicken dieses Buttons führt dazu, wie der Typ vermuten lässt, dass das Formular versendet wird.

<input type="reset" value="Neu" />

erzeugt einen Kommandobutton mit dem angegebenen Wert als Bezeichnung (hier: Neu). Das Anklicken dieses Buttons führt dazu, wie (auch hier) der Typ vermuten lässt, dass die Eingaben gelöscht, genauer auf die Voreinstellung zurückgesetzt wird.

Protokolle

Als Protokolle kommen alle Dienste in Frage, auf die man verweisen kann, häufig wird jedoch das http-Protokoll verwendet. Das Formular wird dabei an ein Programm übertragen, welches die Daten auswertet.

Beispiel:

...
<form method="post" action="mailto:salvador@brauchbar.de">
...

Im Beispiel würden die Daten per EMail versendet werden. Alte IE <4 können das nicht. NS hatte nie ein Problem damit.

Üblicherweise warnt der Browser den Benutzer, wenn das EMail-Protokoll verwendet wird, denn dabei gibt der Absender seine EMail-Adresse an die angeschriebene Person weiter.

Ein besserer Weg ist ein Script zu verwenden, ein Programm, welches die Daten empfängt und verarbeitet und ggf. weiterreicht. z.B.:

...
<form method=post action="/cgi-bin/mailit.pl">
...

Damit haben Sie das Ende des Formular-Tutorials erreicht. Viel Erfolg beim Einsatz von Formularen wünscht Ihnen der Autor

Thomas Salvador.

Teil 3

Formulare in HTML-4

Auswahllisten

Einfache Auswahl

Mehrfache Auswahl

Kommandos

Kommando-Button

Protokolle

Verwandte Artikel und Seiten