HTML und XHTML

Formulare

Kontroll-Elemente

Radio Buttons

Der Name Radio Button stammt von den Radiogeräten her, deren Sender mit Knöpfen gewählt werden konnten. Natürlich war es nicht möglich, zwei Sender gleichzeitig zu hören, und so wurden beim Druck auf eine Senderwahltaste alle andern Tasten wieder in die Ausgansstellung zurückgebracht.

Die Folgen:

Es ist nie mehr als eine Taste gedrückt.
Es ist immer eine Taste gedrückt
Ein Gerät mit nur einer Taste macht gar keinen Sinn.

Du kannst die Analogie zwischen Radio und Radio Buttons am folgenden Beispiel ausprobieren und auf die Tasten oder die Radio Buttons klicken.

Auch für Radio Buttons haben wir eine Verwendungsmöglichkeit: Wir möchten, dass unsere Besucher eine Angabe dazu machen, wie ihr Rezept gewürzt ist.

Übung 52

Füge drei Radio Buttons in unser Formular ein, jeden in einem eigenen <p>-Element. Alle drei sollen den selben Namen tragen: gewuerzt. Wir werden gleich noch sehen, warum. Auch ein value-Attribut sollen sie kriegen, und hier gibst du ihnen unterschiedliche Werte, nämlich mild, kräftig und scharf.

Das war sicher zu bewältigen und sollte jetzt so aussehen:

<p><input type="radio" name="gewuerzt" value="mild" /></p>
<p><input type="radio" name="gewuerzt" value="kräftig" /></p>
<p><input type="radio" name="gewuerzt" value="scharf" /></p>

Und nun: Warum haben sie alle den selben Namen?

Das ist eine clevere Idee, mit der sich gleich zwei Probleme lösen lassen. Zum einen sind ja Radio Buttons in Gruppen zusammengefasst. Es ist auch gut denkbar, dass ein Formular mehrere solcher Gruppen enthält. Das name-Attribut identifiziert die Gruppe: alle Radio Buttons mit dem selben Namen gehören zur selben Gruppe. Wenn ein Radio Button angeklickt wird, dann wird er aktiv und alle andern Radio Buttons seiner Gruppe werden inaktiv. Die Gruppenzugehörigkeit ist wichtig und wird auf diesem Weg ohne Zusatzaufwand erreicht.

Auch für das verarbeitende Programm wird die Sache einfacher. Grob gesagt merkt es gar nicht mehr, dass da eine Gruppe von Radio Buttons war - es kriegt einen Namen (gewuerzt) und einen Wert (mild, kräftig oder scharf, je nachdem, welcher Button aktiv war).

Wenn du siehst, wie sich unser Formular präsentiert, dann stellst du sicher fest, dass es zwar funktioniert, aber noch lange nicht benutzerfreundlich ist. Dem wollen wir im Folgenden abhelfen.

Homepapa
MÃ¤rz 2004

Vorheriger Abschnitt:
Checkboxen

NÃ¤chster Abschnitt:
anschreiben