Radio-Buttons

Radio-Buttons sollten immer dann genutzt werden, wenn man dem Nutzer eine Auswahl zwischen 2 oder mehr Optionen anbieten möchte. Sie sehen ein wenig aus wie Checkboxen, aber im Gegensatz dazu kann man nur genau eine Option auswählen. Die einfachste Art eines Radio-Buttons ist ein Input Element bei dem die type-Eigenschaft auf radio gesetzt wird:

<input type="radio">

Aber wie bei allen Eingabefeldern muss auch hier ein eindeutiger Name definiert werden um die Nutzbarkeit zu gewährleisten. Ohne Namen ist das Element nicht identifizierbar wenn es an den Server zur Verarbeitung zurückgesendet wird. Man sollte auch einen Wert vorgeben -um vorzugeben ob der Button ausgewählt ist oder nicht. Hier ein kleines Beispiel:

<input type="radio" name="nameOfChoice" value="1">

So, jetzt haben wir einen voll funktionsfähigen Radio-Button, der seinen Wert auch an den Server zurücksenden kann. Aber wenn man das Beispiel einmal ausführt wird man feststellen, dass ein einzelner Radio-Button nur wenig Sinn macht. Aber das liegt in der Natur der Radio-Buttons, da sie immer die Auswahl zwischen zwei oder mehr Optionen bieten sollen. Wenn man nur eine Option hat, sollte man Checkboxes benutzen.

Mit dem gelernten im Hitnerkopf möchte ich ein weiteres Beispiel zeigen, in dem es mehrere Radio-Buttons gibt, die einem erlauben sein Lieblingstier auszuwählen:

<form method="post" action="/Tests/Post">
    <fieldset>
        <legend>What is Your Favorite Pet?</legend>
        <input type="radio" name="favorite_pet" value="Cats">Cats<br>
        <input type="radio" name="favorite_pet" value="Dogs">Dogs<br>
        <input type="radio" name="favorite_pet" value="Birds">Birds<br>
        <br>
        <input type="submit" value="Submit now">
    </fieldset>
</form>

Man beachte hier vor allem, dass alle Radio Buttons den gleichen Wert in der name Eigenschaft haben. Das ist sehr wichtig, da so die Radio Buttons zu einer Auswahlgruppe zusammengefasst werden. Da es nur einen Auswahlwert bei einer ganzen Gruppe geben darf, also immer nur ein Radio-Button ausgewählt sein darf. Durch die Zusammenfassung zu einer Gruppe erreicht man genau das. Die value Eigenschaft darf dabei allerdings immer nur eindeutig sein, weil das der Wert ist, der als gewählter Wert an den Server zurückgesendet wird.

Ausgewählt oder nicht ausgewählt?

Wenn man sich das vorhergehende Beispiel einmal anschaut, wird man feststellen, das keiner der Radio-Buttons per default ausgewählt ist. Für Checkboxen macht das durchaus Sinn, aber mit Radio-Buttons möchte man den Nutzer ja meist dazu "zwingen" eine Auswahl zu treffen. Das kann natürlich mit einer Validierung gemacht werden, aber viel einfache ist es einfach eine Auswahloption vorzugeben. Wirklich einfach ist es, da man nur die checked Eigenschaft mit angeben muss:

<input type="radio" name="favorite_pet" value="Cats" checked>Cats<br>
<input type="radio" name="favorite_pet" value="Dogs">Dogs<br>
<input type="radio" name="favorite_pet" value="Birds">Birds<br>

Wie man sieht wurde dem ersten Radio-Button das word "checked" hinzugefügt -dieser Button wird also direkt zu Anfang ausgewählt. Der Nutzer kann die Auswahl nun ändern, aber es ist nicht möglich NICHTS auszuwählen. Als kleiner Rückblick, in den Tagen von xHTML musste jedes Attribut auch einen Wert haben (auch boolean Attribute), was dann so aussah:

<input type="radio" name="favorite_pet" value="Cats" checked="checked">Cats<br>

Beide gezeigten Wege funktionieren in modernen Browsern, aber der erste Weg ist kürzer und irgendwie mehr HTML5.

Labels für Radio-Buttons

Beim testen des vorhergehenden Beispiels sieht man, dass man Text neben einem Radio-Button platzieren kann, aber trotzdem beides unterschiedliche Teile sind. Man kann also nicht auf den Text klicken und der Radio-Button wird ausgewählt. Das kann für die Nutzer sehr nervig sein, wenn sie immer genau auf die Schaltfläche klicken müssen. Aber zum Glück für uns als Entwickler, ist das sehr einfach zu lösen: Man benutzt einfach das label Element. Hier ein kleines Beispiel um mal die Unterschiede zu verdeutlichen:

<input type="radio" name="favorite_pet" value="Cats" checked>Cats<br>
<input type="radio" name="favorite_pet" value="Dogs" id="dogs">
<label for="dogs">Dogs</label>

Es sind zwei Radio-Buttons - einer mit und einer ohne Label. Sie mögen vielleicht fast gleich aussehen, aber der mit dem Label kann angewählt werden wenn man die Schaltfläche direkt oder auch nur das Label anklickt. Das ist für den Nutzer natürlich sehr angenehm, wenn er am PC sitzt und mit der Maus arbeitet, aber vor allem wenn er ein Touch Gerät benutzt, da dort die kleine Radio Buttons und Checkboxes schon einmal schwer mit dem Finger zu treffen sind.

Das Label ist sehr einfach, es nutzt nur das for Attribut um sich selbst an ein anderes Formular zu binden wo das id Attribut entsprechend gesetzt wurde. (wie man sieht gibt es den Wert "dogs" jetzt an beiden Stellen.

Dynamisch mit Radio-Buttons arbeiten

Wie bei jedem anderen DOM Element kann man die Radio Buttons mit JavaScript beeinflussen. Um einmal zu zeigen wie das funktioniert haben wir ein kleines Beispiel in dem JavaScript genutzt wird um herauszufinden welche Option ausgewählt wurde um dann den Nutzer nach einer kurzen Bestätigung vor der Übermittlung zu bitten.

<form method="post" action="/Tests/Post" onsubmit="return ValidateForm();">
    <fieldset>
    <legend>What is Your Favorite Pet?</legend>
    <input type="radio" name="favorite_pet" value="Cats" checked>Cats<br>
    <input type="radio" name="favorite_pet" value="Dogs">Dogs<br>
    <input type="radio" name="favorite_pet" value="Birds">Birds<br>
        <br>
    <input type="submit" value="Submit now">
    </fieldset>
</form>

<script type="text/javascript">
function ValidateForm()
{
    var radioButtons = document.getElementsByName("favorite_pet");
    for(var i = 0; i < radioButtons.length; i++)
    {
        if(radioButtons[i].checked == true)
        {
            if(confirm("You have selected " + radioButtons[i].value + " as your favorite pet. Is that correct?"))
                return true;
            else
                return false;
        }
    }
}
</script>

Das Formular ist fast das gleiche wie im vorherigen Beispiel, aber es wurde ein Eventhandler für das onsubmit Ereignis auf dem Formular hinzugefügt. Dieser verweist auf eine JavaScript Funktion, die im unteren Teil definiert ist. Es handelt sich um eine einfache Funktion, die die Radio Buttons durchgeht und feststellt wo die checked Eigenschaft auf true gesetzt ist. Dann wird eine Bestätigung durch den Nutzer eingeholt. Als Rückgabewerte werden true oder false gesetzt anhand derer wir entscheiden ob das Formular abgesendet wird oder nicht.

Das war nur ein einfaches Beispiel wie man mit Radio-Buttons und JavaScript arbeiten kann. Man kann noch so viel mehr damit machen, vor allem wenn man ein JavaScript Framework wie jQuery nutzt, da es die Arbeit mit DOM Elementen sehr vereinfacht.

Zusammenfassung

Radio-Buttons erlauben es einem eine Liste von Optionen bereitzustellen, aus der ein Nutzer genau eine auswählen kann. Man sollte Labels nutzen um den Beschreibungstext an seine Radio-Buttons zu binden und dem Nutzer so eine größere Fläche zum Anklicken zu bieten. Zudem ist dies noch sehr gut wenn Nutzer einen Screenreader benutzen weil sie die kleinen Elemente nicht mehr so gut erkennen können.