Mathe und Info

Seite

Steuerelemente

Sinn und Zweck

Auf mittlerweile jeder Website gibt es die Möglichkeit nach Informationen zu suchen, oder sich für besondere Dienste anzumelden.
Die reine textuelle Darstellung hat sich im modernen Internet längst überholt. Die User wollen Interaktion. Diese Interaktion erfordert immer Benutzereingaben.
Durch die Verbreitung von Rechner in nahezu jedem Haushalt haben sich Standards bei Benutzereingaben entwickelt. D.h. es gibt bei unterschiedlichen Seiten immer wieder dieselben Eingabemöglichkeiten. Man kann seine EMail-Adresse in ein Feld eingeben. Es gibt die Möglichkeit auf einen Button zu klicken und dann passiert etwas.
Die Fachbezeichnung für solche Elemente lautet "Steuerelemente". Die sind auch in anderen Programmiersprachen, die eine Benutzereingabe erfordern, bekannt.

Welche Steuerelemente gibt es?

Wie bei anderen Programmiersprachen mit einer grafischen Oberfläche gibt es auch bei HTML Standardsteuerelemente. In diesem Online-Kurs gehe ich nur auf die elementarsten Steuerelemente ein.

Formularbuttons
Texteingabe
Radiobuttons
Checkboxen
Auswahllisten

Grundsätzlich gilt, dass fast jedes Steuerelement durch das INLINE-Tag <input> eingeleitet wird.

Formularbuttons

Ein Formularbutton bezeichnet einen Button, der zum Steuern der Eingabe in ein Formular (siehe hier) dient. Man kann damit Eingaben zurücksetzen oder abschicken. Die Syntax lautet dabei

<input type="submit" name="btnSubmit" value="Schick mich ab">

Hinweis: Die Beschriftung des Buttons wird über das value-Attribut gesteuert.

Ein Button zum Zurücksetzen der eingebenen Formular-Daten hat den Typ reset:

<input type="submit" name="btnSubmit" value="Schick mich ab">

Texteingaben

Ich möchte mich zunächst auf einzeilige Eingaben beschränken. Dann erzeugt man ein Eingabefeld durch:

<input type="text" name="txtMeineEingabe">

Mit Hilfe des Name-Attributs wird der Name des Steuerelementes festgelegt. Dies ist bei der späteren Auswertung von Daten aus einem Formular wichtig. (siehe dazu auch den PHP-Kurs)

Radiobuttons

Radiobuttons dienen zur Auswahl einer einzigen von mehreren Möglichkeiten. Dazu definiert man einfach mehrere Steuerelemente vom Typ radio und der Browser stellt die Elemente automatisch als Radiobuttons dar.

<input type="radio" name="optTest" value="Berg">Berg<br>
<input type="radio" name="optTest" value="Strand">Strand<br>
<input type="radio" name="optTest" value="Meer">Meer

Hinweis: Man muss den beschreibenden Text für diesen Steuerelement extra angeben. Mit Hilfe des value-Attributes wird nur der Wert festgelegt, der übermittelt werden soll.

Bei den Programmiersprachen VB und C++ gibt es in der Regel sogenannte Optionsfelder. Daher haben wir uns am BTR entschieden auch für Radiobuttons die Abkürzung opt einzuführen.

Checkboxen

Bei Checkboxen funktioniert es so ähnlich wie bei Radiobuttons, nur dass diesmal eine Mehrfachauswahl möglich ist. Ohne zu weit vorzugreifen, werden Checkbox-Felder idR als Array übergeben. (Näherers zu Arrays findet man hier). In Zusammenarbeit mit dem Datenbank-Kollegen haben wir uns am BTR auf folgende Programmierrichtlinie festgelegt:

<input type="checkbox" name="chkTest[0]" value="Berg">Berg<br>
<input type="checkbox" name="chkTest[1]" value="Strand">Strand<br>
<input type="checkbox" name="chkTest[2]" value="Meer">Meer

Hinweis: Dabei werden auch Checkbox-Felder immer mit demselben Namen versehen, erweitert jedoch um eine Indexnummer, die aufsteigend nummiert wird. Die tiefere Bedeutung kann hier nicht erläutert werden, da sie PHP-spezifisch ist. (Näherers findet Ihr im PHP-Kurs)

Auswahllisten

Dies ist das einzige Steuerelement, welches auch in HTML ein eigenes Element besitzt. Eine Auswahlbox wird durch

<select name="selMeineAuswahl">
<option>Wahl1</option>
<option>Wahl1</option>
<option>Wahl1</option>
</select>

erzeugt. Ebenso wie bei Radiobuttons ist hier nur eine Auswahl möglich. Jedoch wird dem Benutzer statt Radiobuttons eine Combobox angezeigt.

Beschriftungsfelder

Das sind sogenannte Labels. Mit Hilfe von Labels kann man Beschriftungen für Steuerelemente erzeugen. Dabei dient das

<label for="selMeineAuswahl"> Dies ist ein Label-Text</label>

nur als zusätzliche Semantik für andere Programme. Das Label-Tag selber hat keinerlei grafische Bedeutung oder wird auf besondere Art dargestellt. Kurz gesagt: Man erleichtert einem Parser, Text von Beschriftungen zu unterscheiden. Wer das jetzt nicht versteht, der muss in meinen Unterricht kommen. ;-)

Wie baue ich Steuerelemente in eine HTML-Seite ein?

Die Steuerelemente alleine kann man einfach in den HTML-Code schreiben, allerdings machen Sie dann keinen Sinn. Dazu benötigt man Formulare, das wird im folgenden Kapitel erklärt.

Infoblätter und Arbeitsblätter

LinkName
Info: LinkBeschreibung